本节为大家介绍了css中filter滤镜，包括静态滤镜及动态滤镜的使用方法，不了解的朋友可以参考下：
一、css静态滤镜样式 （filter）（只有ie4.0以上支持） 
css静态滤镜样式的使用方法：{ filter : filtername( parameters1, parameters2, ...) } 
filter样式 简要说明 支持参数 
alpha：设置图片或文字的不透明度 opacity、finishopacity、style、startx、starty、finishx、finishy、add、direction、strength
blur：在指定的方向和位置上产生动感模糊效果 add、direction、strength
chroma：对所选择的颜色进行透明处理 color
dropshadow：在指定的方向和位置上产生阴影 color、offx、offy、positive
fliph：沿水平方向翻转对象
flipv：沿垂直方向翻转对象
glow：在对象周围上发光 color、strength
gray：将对象以灰度处理
invert：逆转对象颜色
light：对对象进行模拟光照
mask：对对象生成掩膜 color
shadow：沿对象边缘产生阴影 color、direction
wave：在垂直方向产生正弦波形 add、freq、lightstrength、phase、strength
xray：改变对象颜色深度，并绘制黑白图象
以上就是静态滤镜的全部内容，要注意的是css是区分大小写的！ 
二、css动态滤镜
动态滤镜可以为页面添加动人的淡入淡出、图象转化效果，它可以分为两种blend（混合）和reveal（显示），前者可以使对象渐渐消失或出现，后者提供了24种图象转化的效果。对于动态滤镜的调用除去象在静态滤镜中要定义的滤镜类型，参数等等，还用到脚本语言控制它的状态。 
首先，在开始一个动态效果之前，先需要进行装备（apply），然后播放（play）动态效果，在动态效果进行中还可以中断动态效果（stop），以上可以用下面的方法实现： 
对象名.filters(滤镜数值).apply()
对象名.filters(滤镜数值).play()
对象名.filters(滤镜数值).stop() 
对于滤镜状态的判断可以通过“对象名.filters(滤镜数值).status”判断，该值为0时，表示滤镜未执行，为1时，表示滤镜已经完成，为2时表示滤镜在执行中。 
在定义filter时，如上面所提到的，可以有混合（“filter:blendtrans(duration=时间数值)”，duration表示滤镜执行需要的时间，单位为秒）和显示（“filter:revealtrans(duration=时间数值,transition=过渡类型)”，过渡类型为从0－23的数值）两种。 
滤镜目前还未被w3c正式承认。滤镜只是微软ie浏览器的组成部分，不能用于netscape浏览器。制定有关标准的组织正在就此进行讨论，但尚未达成最后定论。在我看来，滤镜是一种非常有趣而且是制作精彩的视觉效果必不可少的一部分。滤镜能节省带宽，而且是你能在制作奇妙的 
视觉设计时使用文字格式，而不必先制作庞大的文字位图以取得相同的效果。
但由于这些功能尚未成为html的正式组成部分，所以并不是所有的浏览器都能看到这些特色。有些时候，你必须考虑以传统的方式制作相同的效果，当然，你不得不继续将庞大的gif文件塞到网页之中。
沉默...沉默... 
三、css滤镜filter详解 
语法：
style="filter:filtername(fparameter1, fparameter2...)"
（filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数） 
滤镜说明：
alpha：设置透明层次
blur：创建高速度移动效果，即模糊效果
chroma：制作专用颜色透明
dropshadow：创建对象的固定影子
fliph：创建水平镜像图片
flipv：创建垂直镜像图片
glow：加光辉在附近对象的边外
gray：把图片灰度化
invert：反色
light：创建光源在对象上
mask：创建透明掩膜在对象上
shadow：创建偏移固定影子
wave：波纹效果
xray：使对象变得像被x光照射一样 
1、滤镜：alpha 
语法：
style=filter:alpha(opacity=opacity, finishopacity=finishopacity，style=style, startx=startx，starty=starty，finishx=finishx，finishy=finishy)
说明：
opacity：起始值，取值为0～100, 0为透明，100为原图。
finishopacity：目标值。
style：1或2或3
startx：任意值
starty：任意值 
例子：filter:alpha(opacity=0,finishopacity=75,style=2)
2、滤镜：blur
语法：
style=filter:blur(add = add, direction = direction, strength = strength)
说明：
add：一般为1，或0。
direction：角度，0～315度，步长为45度。
strength：效果增长的数值，一般5即可。 
例子：filter:blur(add=1,direction=45,strength=5)
3、滤镜：chroma 
语法：
style=filter:chroma(color = color)
说明：color：#rrggbb格式，任意。 
例子：filter:chroma(color=#ffffff)
4、滤镜：dropshadow 
语法：
style=filter:dropshadow(color=color, offx=offx, offy=offy, positive=positive)
说明：
color:#rrggbb格式，任意。
offx：x轴偏离值。
offy：y轴偏离值。
positive：1或0。 
例子：
filter:dropshadow(color=#6699cc,offx=5,offy=5,positive=1)
5、滤镜：fliph 
语法：
style=filter:fliph
例子：filter:fliph 
6、滤镜：flipv 
语法：style=filter:flipv 
例子：filter:flipv 
7、滤镜：glow 
语法：style=filter:glow(color=color, strength=strength) 
说明：
color：发光颜色。
strength：强度(0－100) 
例子：filter:glow(color=#6699cc,strength=5) 
8、滤镜：gray
语法：style=filter:gray 
例子：filter:gray 
9、滤镜：invert 
语法：style=filter:invert 
例子：filter:invert 
10、滤镜：mask 
语法：style=filter:mask(color=color) 
例子：filter:mask (color=#ffffe0) 
11、滤镜：shadow 
语法：filter:shadow(color=color, direction=direction) 
说明：
color：#rrggbb格式。
direction：角度，0－315度，步长为45度。 
例子：filter:shadow (color=#6699cc, direction=135) 
12、滤镜：wave 
语法：filter: wave(add=add，freq=freq，lightstrength=strength，phase=phase， strength=strength) 
说明：
add：一般为1，或0。
freq：变形值。
lightstrength：变形百分比。
phase：角度变形百分比。
strength：变形强度。 
例子：filter: wave(add=0, phase=4, freq=5, lightstrength=5, strength=2) 
13、滤镜：xray 
语法：style=filter:xray 
例子：filter:xray