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

多福老人歡迎您 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>下面是七的效果圖:

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

讚賞共 0 人讚賞
推薦閱讀:

做媽媽 - 一枝獨秀的日誌 - 幸福村-全球最大華語家庭互動社交網路 - Powered ...
拍到真不易!沒見過吧? - Qzone日誌
詩畫田園 - Qzone日誌
男人喜歡什麼樣的女人 - Qzone日誌
左右手 - Qzone日誌

TAG:圖片 | 學習 | 代碼 | 網易 | 博客 | 筆記 | 網易博客 | 日誌 | 小小 |