學習筆記——給圖片加框的代碼:（摘自網易博客小小的日誌）

多福老人歡迎您 http://qwp43.360doc.com

圖片加框學習筆記代碼<center><img src=http://image25.360doc.com/DownloadImg/2011/02/0415/9911318_1.jpgstyle="border:25 outset #ff88ff"></center>代碼分解<center></center>置中<img src=http://image25.360doc.com/DownloadImg/2011/02/0415/9911318_1.jpg>插入圖片style="border:25 outset #ff88ff設置圖框：border:25 為圖框寬 ；outset為立體；#ff88ff 為顏色設置方向style="BORDER-BOTTOM: #ff0000 3px solid;BORDER-LEFT: #ff0000 3px solid;BORDER-TOP: #ff0000 3px solid;BORDER-RIGHT: #ff0000 3px solid"其中BORDER-BOTTOM: #ff0000 3px solid（下方，表格顏色，格線寬度，圖框的種類）BORDER-LEFT: #ff0000 3px solid（左方，表格顏色，格線寬度，圖框的種類）BORDER-TOP: #ff0000 3px solid（上方，表格顏色，格線寬度，圖框的種類）BORDER-RIGHT: #ff0000 3px solid（右方，表格顏色，格線寬度，圖框的種類）BORDER=*為四周圖框的種類solid單邊框double 雙邊框outset 立體鏡框inset 立體鏡框dashed虛線框groove 凹槽框ridge 脊狀框形成代碼例1<center><img src="http://image32.360doc.com/DownloadImg/2011/07/2105/14501450_1.jpg" width_=600style="BORDER=30px #ff0000 solid"></center>效果

例2<center><img src="http://image32.360doc.com/DownloadImg/2011/07/2105/14501450_1.jpg" width_=600 "style="BORDER-LEFT: #ff0000 13px solid"></center>效果

附給圖片加框的代碼:（摘自網易博客小小的日誌）下面這是一張原圖:

1. 圖片單邊框的代碼:<center><imgsrc="https://www.getit01.com/getimg_360.php?url=http://image25.360doc.com/DownloadImg/2011/02/0415/9911318_1.jpg" style="border:3 solid #ff0000"></center>下面是一的效果圖:

2.圖片雙邊框的代碼:<center><imgsrc="https://www.getit01.com/getimg_360.php?url=http://image25.360doc.com/DownloadImg/2011/02/0415/9911318_1.jpg" style="border:5 double green"></center>下面是二的效果圖:

3.立體鏡框的代碼（一）:<center><img src=http://image25.360doc.com/DownloadImg/2011/02/0415/9911318_1.jpgstyle="border:25 outset #ff88ff"></center>下面是三的效果圖:

4.立體鏡框的代碼（二）:<center><imgsrc="https://www.getit01.com/getimg_360.php?url=http://image25.360doc.com/DownloadImg/2011/02/0415/9911318_1.jpg" style="border:25 inset #ff88ff"></center>下面是四的效果圖:

5.虛線框的代碼:<center> <img src="https://www.getit01.com/getimg_360.php?url=http://image25.360doc.com/DownloadImg/2011/02/0415/9911318_1.jpg" style="border:4 dashed #ff0000"></center>下面是五的效果圖:

6.凹槽框的代碼:<center> <img src="https://www.getit01.com/getimg_360.php?url=http://image25.360doc.com/DownloadImg/2011/02/0415/9911318_1.jpg" style="border:25 groove green" border="0"></center>下面是六的效果圖:

7.脊狀框的代碼:<center> <img src="https://www.getit01.com/getimg_360.php?url=http://image25.360doc.com/DownloadImg/2011/02/0415/9911318_1.jpg" style="border:25 ridge green" border="0"></center>下面是七的效果圖:

你的讚賞是我堅持原創的動力