圖片特效代碼匯集和邊框制作

雪中梅書齋 2012-03-13

展開全文

Good fun編輯

素材圖：

1。單線框

代碼：<center><img src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg" style="border:4 solid #ffcc99"></center>

代碼簡單說明： border:4 是指邊框線的粗細改變數(shù)值4來改變線的大小

solid #ffcc99 是指邊框線的顏色，改變后面的顏色代碼來改變邊框線顏色詳細顏色代碼表

請點擊：網(wǎng)易博客代碼(顏色代碼)

http//.....jpg 就是圖片地址，換成你自己的（圖片地址，你只要右擊你的圖片，屬性就有了）

上面的單線框還可以用下面代碼：

這個代碼效果和上面代碼一樣，只是這個可以分別設(shè)置上下左右四個邊框線的大小及顏色！可以是4個邊框線的顏色和大小都不同！只要改變4個數(shù)值4和顏色代碼即可改變！以下效果就不一一細說了，有問題，留下評論和我交流！

2。雙線框

代碼： <CENTER><IMG style="BORDER-BOTTOM: #ff0000 6px double; BORDER-LEFT: #ff0000 6px double; BORDER-TOP: #ff0000 6px double; BORDER-RIGHT: #ff0000 6px double" src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg"></CENTER>

3。凸出框

代碼： <CENTER><IMG style="BORDER-BOTTOM: #ff3300 28px outset; BORDER-LEFT: #ff3300 28px outset; BORDER-TOP: #ff3300 28px outset; BORDER-RIGHT: #ff3300 28px outset" src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg"></CENTER>

4、凹進框

代碼：<CENTER><IMG style="BORDER-BOTTOM: #ff3300 28px inset; BORDER-LEFT: #ff3300 28px inset; BORDER-TOP: #ff3300 28px inset; BORDER-RIGHT: #ff3300 28px inset" src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg"></CENTER>

郵票框：

代碼：<CENTER>
<TABLE style="BORDER-BOTTOM: #ff3366 3px dashed; BORDER-LEFT: #ff3366 3px dashed; BORDER-TOP: #ff3366 3px dashed; BORDER-RIGHT: #ff3366 3px dashed" cellSpacing=5 cellPadding=0 bgColor=#ff1234>
<TBODY>
<TR>
<TD bgColor=#aeffae height=450 vAlign=center width=600 align=middle><IMG src="圖片地址＂%20style=" #ff88ff? inset border:25></TD></TR></TBODY></TABLE></CENTER>

虛線框

代碼：<CENTER><IMG style="BORDER-RIGHT: #ff0000 4px dashed; BORDER-TOP: #ff0000 4px dashed; BORDER-LEFT: #ff0000 4px dashed; BORDER-BOTTOM: #ff0000 4px dashed" src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg"></CENTER>

脊狀框

代碼： <CENTER><IMG style="BORDER-BOTTOM: #ff3366 28px ridge; BORDER-LEFT: #ff3366 28px ridge; BORDER-TOP: #ff3366 28px ridge; BORDER-RIGHT: #ff3366 28px ridge" border=0 src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg"></CENTER>

投影：

代碼： <CENTER>
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#ff3388,direction:145,strength:15)" border=2 cellSpacing=3 cellPadding=10 width=400 height=400><TBODY><TR>
<TD bgColor=#ff3366 vAlign=center align=middle><IMG src="圖片地址"></TD></TR></TBODY></TABLE></CENTER>

代碼說明：“color:#ff3388”是投影顏色，“bgColor=#ff3366”是圖片背景顏色； “strength:15”是投影長度，這幾個參數(shù)可以自己設(shè)置！

線型漸變：

代碼： <center>
<img src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg" style="filter=alpha(opacity=100,style=1,finishopacity=0)"></center>

圓形漸變：

代碼： <CENTER><IMG style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg"></CENTER>

X型漸變：

代碼： <CENTER><IMG style="FILTER: alpha(opacity=100,style=3,finishopacity=0)" src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg"></CENTER>

X光效果

代碼： <center><img src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg" style="filter:'xray'"></center>

浮雕效果

代碼： <center><img src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg" style="filter:progid:DXImageTransform.Microsoft.Emboss()"></center>

色彩顛倒

代碼： <center><img src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg" style="filter:invert"></center>

上下顛倒：

代碼： <CENTER><IMG style="FILTER: flipv" src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg"></CENTER>

左右顛倒

代碼： <center><img src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg" style="filter:fliph"></center>

水波效果：

代碼： <center><img src="http://image50.360doc.com/DownloadImg/2012/03/1306/22260836_1.jpg" style="filter:wave(freq=10, strength=4, phase=5, lightstrength=10)"></center>

鐘成友情提示：后面的參數(shù)是水波的幅度和數(shù)量、長度！可以自己嘗試改變！不再細說了！有問題留下評論和我交流！