CSS修饰效果代码

23种CSS图片修饰效果代码:
<CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-9/2008919516673537.gif"></CENTER>
<br><br>
1。单线框<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:3 solid #ff0000"><br><br>
2。双线框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:8 double green"><br><br>
3。凸出框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"style="border:25 outset #ff88ff"><br><br>
4。凹进框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 inset #ff88ff"><br><br>
5。邮票框
<br><br>
<table style="border:3 dashed #f6ae56" cellspacing="1" cellpadding="0" bgcolor="#f6ae56">
<tr><td bgcolor="#aeffae" width=360 height=180 align=center ><img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg">
</TD></TR></TABLE>
<br><br>
6。虚线框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:4 dashed #ff0000"><br><br>
7。凹槽框
<br><br><img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 groove green" border="0"><br><br>
8。脊状框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 ridge green" border="0"><br><br>
9。立体阴影框
<br><br>
<table width=400 height=400 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)"> <tr><td bgcolor="#ffffff" align=center valign=middle><img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"><br><br>
</TD></TR></TBODY></TABLE>
10。阴影框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:shadow(color=#32cd32)"><br><br>
11。横向渐变透明
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=1,finishopacity=0)"><br><br>
12。圆形渐变透明
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=2,finishopacity=0)"><br><br>
13。X形渐变透明
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=3,finishopacity=0)"><br><br>
14。改变某种颜色
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"style="FILTER: Chroma(Color=#13629f)"><br><br>
15。黑白效果
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:'gray'"><br><br>
16。X光效果（底片）
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:'xray'"><br><br>
17。浮雕效果
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:progid:DXImageTransform.Microsoft.Emboss()"><br><br>
18。上下颠倒
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:flipv"> <br><br>
19。左右颠倒
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:fliph"><br><br>
20。色彩颠倒
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:invert"><br><br>
21。粒状阴影
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)">
<br><br>
22。模糊效果
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)"><br><br>
23。水波效果（风吹）
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center>
<br><br>
</b></font>
<CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-9/20089195151190032.gif"></CENTER>


文字修饰特效：
1、Glow：在文字的边外加光辉效果代码：
<CENTER>
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt">
<FONT style="FONT-SIZE: 90pt;FONT-FAMILY:隶书; COLOR: #ffff00">
如画江山</FONT></div>
</CENTER>

（二）Drop Shadow滤镜修饰的文字重叠效果代码：
<CENTER>
<div style="FONT-SIZE:70pt;filter:dropshadow(color=#000000,offX=5,offY=3,Positive=1);WIDTH:100%; COLOR:#60A000;LINE-HEIGHT:150%">
<FONT style="FONT-SIZE:70pt;FONT-FAMILY:隶书">社会主义好！</FONT>
</div></CENTER>

（三）Shadow滤镜修饰的文字阴影果代码：
<CENTER>
<div style="FONT-SIZE:70pt;filter:shadow(color=black,direction=180);WIDTH:100%; COLOR:#60A000;LINE-HEIGHT:150%">
<FONT style="FONT-SIZE:70pt;FONT-FAMILY:隶书">社会主义好！</FONT>
</div></CENTER>

（四）Shadow滤镜修饰的文字阴影果代码２：
<CENTER>
<DIV style="FONT-SIZE: 100pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 150%">
<FONT style="FONT-FAMILY: 华文行楷">
网络世界
</DIV></CENTER>

（五）Shadow滤镜修饰的文字阴影效果代码３：
<CENTER>
<DIV style="FONT-SIZE:70pt;filter:dropshadow(color=000066,offX=-5,offY=-3,Positive=1);WIDTH:100%; COLOR:#FF0000;LINE-HEIGHT:120%">
<FONT style="FONT-FAMILY: 隶书">
　社会主义好！</B></FONT>
</DIV></CENTER>

（六）Shadow滤镜修饰的文字阴影效果代码4：
<CENTER>
<FONT style="FONT-SIZE:80pt; FILTER: shadow(color=black, strength=15); WIDTH: 100%";FONT face=华文彩云 color=00ff00><B>
春风秋雨</B></FONT></CENTER>

（七）Wave滤镜修饰文字变幻效果代码：
<center>
<div style="FONT-SIZE:50pt;filter:wave(add=0,lightstrength=50,strength=6,freq=2,phrase=50);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%">
<FONT style="FONT-FAMILY:华文行楷">
长空雁叫霜晨月</FONT></div>
</center>