图片+相框的制作方法

1、简单边框:
　　

 　　

語法

 <img src="http://image59.360doc.com/DownloadImg/2013/03/3100/31309315_1.jpg" style="border:5 solid #ffCCCC">

語法

 <img src="圖片地址" style="border:相框寬度 solid 相框顏色">

 

2、双边框效果图:
　　

 　　

語法

 <img src="http://image59.360doc.com/DownloadImg/2013/03/3100/31309315_1.jpg" style=" border:7 double #666FF">　

語法

 <img src="圖片地址" style=" border:相框寬度 double 相框顏色">

 

3、虚线边框效果图:
　　

 　

語法

 <img src="http://image59.360doc.com/DownloadImg/2013/03/3100/31309315_1.jpg" style=" border:3 dashed #990000">　　

語法

 <img src="圖片地址" style=" border:相框寬度 dashed 相框顏色">

 

　4、凸出框

　　

 　

語法

 <img src="http://image59.360doc.com/DownloadImg/2013/03/3100/31309315_1.jpg" style="border:10 outset #CCCCFF">　

語法

 <img src="圖片地址" style="border:相框寬度 outset 相框顏色">

 

　5、嵌入框

　　

 　　

語法

 <img src="http://image59.360doc.com/DownloadImg/2013/03/3100/31309315_1.jpg" style="border:15 inset #ff9900">

語法

 <img src="圖片地址" style="border:相框寬度 inset 相框顏色">

 

6、脊狀框

　　

 　　

語法

 <img src="http://image59.360doc.com/DownloadImg/2013/03/3100/31309315_1.jpg" style="border:15 ridge #33FF66">

語法

 <img src="圖片地址" style="border:相框寬度 ridge 相框顏色">

 

7、凹槽框

　　

 　

語法

 <img src="http://image59.360doc.com/DownloadImg/2013/03/3100/31309315_1.jpg" style="border:15  groove #CC6666">

語法

 <img src="圖片地址" style="border:相框寬度  groove 相框顏色">

 

　8、粒狀陰影框

　　

 

語法

 <img src="http://image59.360doc.com/DownloadImg/2013/03/3100/31309315_1.jpg" width="280" height="320" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#080808,strength=30">

語法

 <img src="圖片地址" width="圖片寬度" height="圖片高度" style="filter:progid:DXImageTransform.Microsoft.Glow(color=相框顏色,strength=相框寬度">

code: 顏色代碼