随着浏览器的发展CSS的功能越来越强大，大多数的滤镜效果有类似功能的CSS样式实现了。
对应表：
IE 滤镜 W3C 滤镜
Alpha：设置透明层次. grayscale 灰度
blur：创建高速度移动效果，即模糊效果. sepia 褐色
Chroma：制作专用颜色透明. saturate 饱和度
DropShadow：创建对象的固定影子. hue-rotate 色相旋转
FlipH：创建水平镜像图片. invert 反色
FlipV：创建垂直镜像图片. opacity 透明度
glow：加光辉在附近对象的边外. brightness 亮度
gray：把图片灰度化. contrast 对比度
invert：反色.blur 模糊
light：创建光源在对象上. drop-shadow 阴影
mask：创建透明掩膜在对象上.
shadow：创建偏移固定影子.
wave：波纹效果.
Xray：使对象变的像被x光照射一样.
<table border=1 style="border-style: solid border-width: 1font-size=12px" width="520"><tr>
<td width="510">
<span style="font-size:30ptdisplay:block
text-align:centercolor:blue
filter:glow(color=red,strength=10)height:1">一路阳光 </span></td>
</tr>
<tr>
<td width="510">
<span style="font-size:30ptdisplay:block
text-align:centercolor:darkblue
filter:blur(add=t,direction=135,strength=10)height:1">一路阳光</span></td>
</tr>
<tr>
<td width="510">
<div style="color:redfont-size:25ptheight:1display:block
filter:progid:DXImageTransform.Microsoft.motionblur(strength=30,add=1,direction=135)">
<p align="center"> 一路阳光</div></td>
</tr>
<tr>
<td width="510">
<div style="height:1width:100%
font-family:impactfont-size:30ptcolor:navydisplay:block
filter:progid:DXImageTransform.Microsoft.wave(Strength=3)">
<p align="center"> 一路阳光</div></td>
</tr>
<tr>
<td width="510">
<div style="height:1width:100%
font-family:impactfont-size:30ptcolor:navydisplay:block
filter:progid:DXImageTransform.Microsoft.wave(Strength=3,freq=5)">
<p align="center"> 一路阳光</div></td>
</tr>
<tr>
<td width="510">
<span style="font-size:30ptdisplay:block
text-align:centercolor:darkblue
filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5)
height:1">一路阳光</span></td>
</tr>
<tr>
<td width="510">
<span style="font-size:30ptdisplay:block
text-align:centercolor:darkblue
filter:shadow(color=blue)height:1">一路阳光</span></td>
</tr>
<tr>
<td width="510">
<div align="center" style="height:1font-size:30pt
filter:dropshadow(color=maroon,positive=1)">一路阳光</div></td>
</tr>
<tr>
<td width="510">
<div align="center" style="height:1font-size:30pt
filter:dropshadow(color=maroon,positive=0)">一路阳光</div></td>
</tr>
<tr>
<td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5)
height:1font-size:20ptfont-family:impactbackground-color:blue">
<p align="center">SUNNY</div></td>
</tr>
<tr>
<td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5)
height:1font-family:impactfont-size:20ptbackground-color:blue">
<p align="center">SUNNY</div></td>
</tr>
<tr>
<td style="FILTER:
mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)"
align="center"><font color="blue"
size="6"><b>一路阳光</b></font></td>
</tr>
<tr>
<td style="FILTER:
alpha(opacity=100,finishiopacity=0,style=1)shadow(color=blue,direction=135)"
align="center"><font color="blue"
size="6"><b>一路阳光</b></font></td>
</tr>
<tr>
<td style="FILTER:
mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)"
align="center"><font color="blue"
size="6"><b>一路阳光</b></font></td>
</tr>
<tr>
<td style="FILTER:
glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)"
align="center"><font color=#E1E4EC
size=6><b>一路阳光</b></font></td>
</tr>
<tr>
<td style="FILTER:
mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)"
align="center"><font
color=#8C96B5 size=6><b>一路阳光</b></font></td>
</tr>
<tr>
<td style="FILTER:
glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center"
height=54><font color=#8C96B5
size=6><b>一路阳光</b></font></td>
</tr>
<tr>
<td><span style="position:absolutefont-size:30ptcolor=bluefilter:fliph">一路阳光</span></td>
</tr>
<tr>
<td><span style="position:absoluteleft:200font-size:30ptcolor=bluefilter:flipv">一路阳光</span></td>
</tr>
</table>
<table align=center background="http://www.idc2008.com/468X60-8.gif" border=0>
<tr>
<td style="FILTER: glow(strength=4)mask(color=#E1E4EC)"><font
size="7"> <b>一路阳光</b></font></td>
</tr>
</table>
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title></title>
<style type="text/css">
#all{border: 1px solid #BFBFBFwidth: 500pxheight: 200pxposition: relativetop: 100pxmargin: 0 auto}
li{list-style: nonewidth: 120pxheight: 120pxbackground: #000000float: leftmargin-left: 5pxtext-align: centercolor: #FFFFFFfont-size: 20px}
li:hover{opacity: 0.5}
</style>
</head>
<body>
<div id="all">
<ul>
<li>我是猪</li>
<li>我是猪</li>
<li>我是猪</li>
</ul>
</div>
</body>
</html>
所谓的滤镜就是改变透明度而已，如果是在css中来写，就是直接给你要改变的标签设置透明度属性，如果是js，那就添加动画改变透明度，可以做出很多很炫的效果。
