【转载】图片加上边框的方法

芒果咖啡 2013-01-28

展开全文

【转载】图片加上边框的方法

本文转载自学海无涯《图片加上边框的方法》

图片加上边框的方法

编辑制作：学海无涯

图片加上边框的方法 - 学海无涯 - 读书之法.在循序而渐进.熟读而精思

1。单线框 <CENTER><IMG style="BORDER-BOTTOM: #ff0000 3px solid; BORDER-LEFT: #ff0000 3px solid; BORDER-TOP: #ff0000 3px solid; BORDER-RIGHT: #ff0000 3px solid" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_3.jpg" __1354674984781__="ev_2128250871"> </CENTER>

2。双线框 <CENTER><IMG style="BORDER-BOTTOM: green 5px double; BORDER-LEFT: green 5px double; BORDER-TOP: green 5px double; BORDER-RIGHT: green 5px double" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_4.jpg" __1354674984781__="ev_9016720186"> </CENTER>

3。凸出框 <CENTER><IMG style="BORDER-BOTTOM: #ff88ff 25px outset; BORDER-LEFT: #ff88ff 25px outset; BORDER-TOP: #ff88ff 25px outset; BORDER-RIGHT: #ff88ff 25px outset" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_5.jpg" __1354674984781__="ev_4312457512"> </CENTER>

4。凹进框 <CENTER><IMG style="BORDER-BOTTOM: #ff88ff 25px inset; BORDER-LEFT: #ff88ff 25px inset; BORDER-TOP: #ff88ff 25px inset; BORDER-RIGHT: #ff88ff 25px inset" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_6.jpg" __1354674984781__="ev_6669241977"> </CENTER>

5。邮票框 <DIV align=center>
<TABLE style="BORDER-BOTTOM: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed; BORDER-RIGHT: #f6ae56 3px dashed" cellSpacing=5 cellPadding=0 bgColor=#f6ae56 align=center>
<TBODY>
<TR>
<TD bgColor=#aeffae height=260 vAlign=center width=260 align=middle>
<IMG src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_7.jpg" __1354674984781__="ev_4324228105"> </TD></TR></TBODY></TABLE></DIV>

图片加上边框的方法 - 学海无涯

6。虚线框 <CENTER><IMG style="BORDER-BOTTOM: #ff0000 4px dashed; BORDER-LEFT: #ff0000 4px dashed; BORDER-TOP: #ff0000 4px dashed; BORDER-RIGHT: #ff0000 4px dashed" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_8.jpg" __1354674984781__="ev_5541362580"> </CENTER>

7。凹槽框 <CENTER><IMG style="BORDER-BOTTOM: green 25px groove; BORDER-LEFT: green 25px groove; BORDER-TOP: green 25px groove; BORDER-RIGHT: green 25px groove" border=0 src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_7.jpg" __1354674984781__="ev_4398581007"> </CENTER>

图片加上边框的方法 - 学海无涯

8。脊状框 <CENTER><IMG style="BORDER-BOTTOM: green 25px ridge; BORDER-LEFT: green 25px ridge; BORDER-TOP: green 25px ridge; BORDER-RIGHT: green 25px ridge" border=0 src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_7.jpg" __1354674984781__="ev_9911888752"> </CENTER>

9。立体阴影框 
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)" border=2 cellSpacing=3 cellPadding=15 width=260 align=center height=400>
<TBODY>
<TR>
<TD bgColor=#ffffff vAlign=center align=middle><IMG src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_5.jpg" __1354674477156__="ev_5061084457"></TD></TR></TBODY></TABLE>

10。横向渐变透明 <CENTER><IMG style="FILTER: alpha(opacity=100,style=1,finishopacity=0)" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_5.jpg" __1354674984781__="ev_1793716267"></CENTER>

11。圆形渐变透明 <CENTER><IMG style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_9.jpg" __1354674984781__="ev_1153446534"></CENTER>

12。X形渐变透明 <CENTER><IMG style="FILTER: alpha(opacity=100,style=3,finishopacity=0)" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_10.jpg" __1354674984781__="ev_7470324817"></CENTER>

13。改变某种颜色 <CENTER><IMG style="FILTER: Chroma(Color=#13629f)" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_5.jpg" __1354674984781__="ev_4073387186"></CENTER>

14。黑白效果 <CENTER><IMG style="FILTER: gray" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_5.jpg" __1354674984781__="ev_7287196793"></CENTER>

15。X光效果（底片） <CENTER><IMG style="FILTER: xray" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_4.jpg" __1354679570046__="ev_7563291948"></CENTER>

16。浮雕效果 <CENTER><IMG src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_4.jpg" __1354679570046__="ev_4616765915"></CENTER>

17。上下颠倒 <CENTER><IMG style="FILTER: flipv" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_4.jpg" __1354679570046__="ev_7593889567"> </CENTER>

18。左右颠倒 <CENTER><IMG style="FILTER: fliph" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_4.jpg" __1354679570046__="ev_4150632858"></CENTER>

19。色彩颠倒 <CENTER><IMG style="FILTER: invert" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_5.jpg" __1354679570046__="ev_1175398497"></CENTER>

20。水波效果（风吹） <CENTER><IMG style="FILTER: wave(freq=11, strength=4, phase=6, lightstrength=10)" src="http://image58.360doc.com/DownloadImg/2013/01/2822/30004570_4.jpg" __1354679570046__="ev_4458337881"></CENTER>

〖素雅模板〗清新淡雅写字模板 - 学海无涯网易博客