转载自
zjr无瑕最终编辑
zjr无瑕自制美图：浪漫的森林之旅
博客代码大全——图片的边框制作
1、单边框：
2、双边框
3、立体镜框（一）
4、立体镜框（二）
5、虚线框
6、凹槽框
7、脊状框
8、横向渐变透明
9、圆形渐变透明
10、X形渐变透明
11、黑白效果
12、X光效果（底片）
13、浮雕效果
14、上下颠倒
15、左右颠倒
16、色彩颠倒
17、粒状阴影
18、模糊效果
19、水波效果（风吹）
20、水中倒影效果
21、图片具有超连接
22、左右滚动的图片
23、向各个方向滚动的图片
代码中可以修改的地方 direction=right 是移动的方向 上：up 下：down 左：right 右：left scrollamount=5 是向下移动速度，可以调整，一般设置在1---15的范围内比较好. 在线代码编辑使用器：
http://ny.xmu.edu.cn/editor.asp对应上面制作图片的代码
<P align=center>1、单边框： </P>
<CENTER><IMG style="BORDER-RIGHT: #ff0000 3px solid; BORDER-TOP: #ff0000 3px solid; BORDER-LEFT: #ff0000 3px solid; WIDTH: 448px; BORDER-BOTTOM: #ff0000 3px solid; HEIGHT: 352px" height=461 src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg" width=613></CENTER>
<P align=center> 2、双边框 </P>
<CENTER><IMG style="BORDER-RIGHT: green 5px double; BORDER-TOP: green 5px double; BORDER-LEFT: green 5px double; BORDER-BOTTOM: green 5px double" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<P align=center>3、立体镜框（一） </P>
<CENTER><IMG style="BORDER-RIGHT: #ff88ff 25px outset; BORDER-TOP: #ff88ff 25px outset; BORDER-LEFT: #ff88ff 25px outset; BORDER-BOTTOM: #ff88ff 25px outset" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<P align=center>4、立体镜框（二） </P>
<CENTER><IMG style="BORDER-RIGHT: #ff88ff 25px inset; BORDER-TOP: #ff88ff 25px inset; BORDER-LEFT: #ff88ff 25px inset; BORDER-BOTTOM: #ff88ff 25px inset" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<P align=center>5、虚线框 </P>
<CENTER><IMG style="BORDER-RIGHT: #ff0000 4px dashed; BORDER-TOP: #ff0000 4px dashed; BORDER-LEFT: #ff0000 4px dashed; BORDER-BOTTOM: #ff0000 4px dashed" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<P align=center>6、凹槽框 </P>
<CENTER><IMG style="BORDER-RIGHT: green 25px groove; BORDER-TOP: green 25px groove; BORDER-LEFT: green 25px groove; BORDER-BOTTOM: green 25px groove" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg" border=0></CENTER>
<P align=center>7、脊状框 </P>
<CENTER><IMG style="BORDER-RIGHT: green 25px ridge; BORDER-TOP: green 25px ridge; BORDER-LEFT: green 25px ridge; BORDER-BOTTOM: green 25px ridge" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg" border=0></CENTER>
<P align=center>8、横向渐变透明 </P>
<CENTER><IMG style="FILTER: alpha(opacity=100,style=1,finishopacity=0)" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<P align=center>9、圆形渐变透明 </P>
<CENTER><IMG style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<P align=center>10、X形渐变透明 </P>
<CENTER><IMG style="FILTER: alpha(opacity=100,style=3,finishopacity=0)" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<P align=center>11、黑白效果 </P>
<CENTER><IMG style="FILTER: gray" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<P align=center>12、X光效果（底片） </P>
<CENTER><IMG style="FILTER: xray" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<P align=center>13、浮雕效果 </P>
<CENTER><IMG style="FILTER: progid:DXImageTransform.Microsoft.Emboss()" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<P align=center>14、上下颠倒 </P>
<CENTER><IMG style="FILTER: flipv" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"> </CENTER>
<CENTER>15、左右颠倒 </CENTER>
<CENTER><IMG style="FILTER: invert" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<CENTER>16、色彩颠倒 </CENTER>
<CENTER><IMG style="FILTER: fliph" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<CENTER>17、粒状阴影 </CENTER>
<CENTER><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=15)" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<CENTER>18、模糊效果 </CENTER>
<CENTER><IMG style="FILTER: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3)" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<CENTER>19、水波效果（风吹） </CENTER>
<CENTER><IMG style="FILTER: wave(freq=11, strength=4, phase=6, lightstrength=10)" src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg"></CENTER>
<CENTER>20、水中倒影效果 </CENTER>
<CENTER><IMG style="WIDTH: 344px; HEIGHT: 253px" height=150 src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg" width=200><BR><IMG style="FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv(); WIDTH: 345px; HEIGHT: 231px" height=150 src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg" width=200></CENTER>
<CENTER>21、图片具有超连接 </CENTER>
<CENTER><A href="http://www.sina.com.cn/m/ziguangge" target=_blank><IMG style="WIDTH: 468px; HEIGHT: 476px" height=449 src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg" width=325></A></CENTER>
<CENTER>22、左右滚动的图片 </CENTER>
<CENTER>
<MARQUEE scrollAmount=2 scrollDelay=0 behavior=alternate width=200 height=180><IMG style="WIDTH: 408px; HEIGHT: 252px" height=200 src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_2.jpg" width=180 border=0> <IMG height=200 src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_1.jpg" width=180 border=0> <IMG height=200 src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_3.jpg" width=180 border=0 ?photoId='_fks_LYLBTm8ZyAo4yLlUT5teff-72LuEnDUV"'> <IMG height=200 src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_4.jpg" width=200 border=0 ?photoId='_fks_LYLBTm8ZyAo4yLlUT5teff-72LuEnDUV"'></MARQUEE></CENTER>
<CENTER> </CENTER>
<CENTER>23、向各个方向滚动的图片 </CENTER>
<CENTER>
<MARQUEE scrollAmount=1 scrollDelay=60 direction=right width=160 height=200><IMG style="WIDTH: 210px; HEIGHT: 219px" height=200 src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_5.jpg" width=180 border=0> <IMG height=200 src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_5.jpg" width=180 border=0> <IMG height=200 src="//image21.360doc.com/DownloadImg/2011/01/1020/8384882_5.jpg" width=180 border=0 ?photoId='_fks_LYLBTm8ZyAo4yLlUT5teff-72LuEnDUV"'> </A></MARQUEE></CENTER>
<CENTER> </CENTER>
<CENTER> </CENTER>
<CENTER>代码中可以修改的地方 direction=right 是移动的方向 上：up 下：down 左：right 右：left scrollamount=5 是向下移动速度，可以调整，一般设置在1---15的范围内比较好.</CENTER>
zjr无瑕欢迎朋友的来访！
