IE 滤镜 Filter

滤镜概述
CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为了增强其IE浏览器功能而特意开发合并的IE浏览器中的一类功能的集合。

filter:filtername(parameters);
filter 滤镜属性
filtername 滤镜名称
parameters 滤镜参数

1、不透明度

filter:alpha(参数=参数值)
filter:alpha(opacity=50)
opacity 透明度 0 - 100 
100 为完全不透明
0 为完全透明
IE 6\IE 7\IE 8\IE 9 支持 
IE 10\IE 11 不支持
chrome\firefox 不支持

2、动感模糊

filter:blur(add=参数值,direction=参数值,strength=参数值...)
add 原图是否显示 值：true false
direction 参数用来设置模糊的方向，模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左271度。
Strength 参数值只能使用整数来指定，他代表有多少像素的宽度将受到模糊影像，默认值是5像素。
IE 6\IE 7\IE 8\IE 9 支持
IE 10\IE 11不支持
chrome\firefox 不支持

3、透明色

filter:chroma(color=颜色值);
color 颜色值 把该颜色透明掉
IE 6\IE 7\IE 8\IE 9 支持
IE 10\IE 11不支持
chrome\firefox 不支持

4、阴影效果

filter:dropshadow(color=颜色值,position=参数值,offx=参数值,offy=参数值)
color 用于控制阴影颜色
position 设置阴影是否为透明
offx 设置阴影相对于原始图像移动的水平距离
offy 设置阴影相对于原始图像移动的垂直距离
IE 6\IE 7\IE 8\IE 9 支持
IE 10\IE 11不支持
chrome\firefox 不支持

5、对象翻转

filter:fliph; 水平翻转
filter:flipv; 垂直翻转
filter:fliph flipv; 水平与垂直都翻转
IE 6\IE 7\IE 8\IE 9 支持
IE 10\IE 11不支持
chrome\firefox 不支持

6、发光效果

filter:glow(color=颜色值,strength=强度值);
color 设置发光颜色
strength 设置发光强度，取值范围（1-255）默认值为5
IE 6\IE 7\IE 8\IE 9 支持
IE 10\IE 11不支持
chrome\firefox 不支持

7、灰度处理

filter:gary;/*黑白照片*/
IE 6\IE 7\IE 8\IE 9 支持
IE 10\IE 11不支持
chrome\firefox 不支持

8、反相效果

filter:invert;
IE 6\IE 7\IE 8\IE 9 支持
IE 10\IE 11不支持
chrome\firefox 不支持

9、X光片效果

filter:xray;
IE 6\IE 7\IE 8\IE 9 支持
IE 10\IE 11不支持
chrome\firefox 不支持

10、遮罩效果

filter:mask(color=颜色值);
*注意：需要给背景设置一个颜色
IE 6\IE 7\IE 8\IE 9 支持
IE 10\IE 11不支持
chrome\firefox 不支持

11、波形滤镜

filter:wave(add=参数值,freq=参数值,lightstrength=参数值,phase=参数值,strength=参数值);
add 设置是否要把对象按照波形样式打乱 true false
freq 设置图片上的波形数目
lightstrength 设置波浪的光照强度，取值范围（0 - 100）
phase 设置波浪的强度大小
IE 6\IE 7\IE 8\IE 9 支持
IE 10\IE 11不支持
chrome\firefox 不支持