From：http://home.51.com/qqouye123/diary/item/10048575.html

滤镜语法 filter：filtername（parameters）

必须先定义filter，filtername是滤镜属性名，包括alpha，blur等parameters是各个滤镜属性的参数。

滤镜分基本滤镜和高级滤镜二种，基本滤镜直接作用在对象上，便可生成效果。高级滤镜需要配合javascript等脚本语言才能产生滤镜效果。这里主要讲基本滤镜

那么基本滤镜有哪些呢？

1 alpha通道

2 模糊效果（blur）

3 移动模糊（motion blur）

4 透明色（chroma）

5 下落阴影（drop shadow）

6 对称交换（flip）

7 光晕（glow）

8 灰度（grayscale）

9 反色（invert）

10 遮罩（mask）

11 阴影（shadow）

12 X光效果（X-ray）

13 浮雕（Emboss，Engrave） c

14波浪（wave）


alpha通道（设置透明度）

表达试 filter：alpha（opacity=#，finishopacity=#，style=#，startX=#，starty=#，finishX=#，finishY=#）；
opacity是透明度等级，可选值是0~100, 0代表完全透明，100代表完全不透明。Style是指定透明区的形状特征，0代表同一形状，1代表线性，2代表圆形放射渐变，3代表矩形放射渐变（当style=2或3时，stratX和startY等坐标参数都没意义，都以图片中心为起始，四周为结束）。

例.alpha{Filter:alpha(opacity=50);}

当style设置为1时，表示线性变换。Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是0~100。StartX代表渐变渐变透明效果的开始坐标，finishX代表渐变渐变透明效果的结束坐标，取值为0~100。

例./* 从上到下渐变 */

alpha{filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=0,finishy=100);}

当style设置为2，3时，方法与style设置为1时类似，就不讲了。

模糊（blur）

filter:progid:DXImageTransform.Microsoft.blur(pixelradius=#,makeshadow=#，shadowopacity=#);

makeshadow是否被处理为阴影，pixelradius设置模糊效果的深度，shadowopacity设置使用makeshadow制作成的阴影的透明度。

例.blur{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);}

效果

例.blur{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=10,makeshadow=ture,shadowopacity=1);}

效果

运动模糊（motion blur）

filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=#,direction=#,add=#); 

add有2个参数，ture flase，用来指定是否叠加原图片。Direction参数用来设置模糊的方向，按照顺时针方向进行的。0度代表向上，每45度一个单位，默认是向左270度。Strength值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响，默认值是5px。

例.motionblur{        filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true);          /* 水平向右 */
}

效果

透明色（chroma）

用来设定某一颜色的透明filter:chroma(color=#)

例.chroma{
      filter:chroma(color=FF6800);              /* 去掉金××× */
}

效果


下落的阴影（dropshadow）

filter:dropshadow(color=#,positive=#,offx=#,offy=#);

color代表投射阴影的颜色。Offx和offy分别表示x方向和Y方向阴影的偏移量。偏移量必需用整数来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置负整数相反。Positive参数有两个值，ture false  ture为任何非透明像素建立可见的投影，flase为透明的像素部分建立可见的投影。

例.drop1{
      filter:dropshadow(color=#ffb6aa,offx=6,offy=4,positive=true);
}

.drop2{
      filter:dropshadow(color=#FFAAAA,offx=6,offy=4,positive=false);
}

效果

翻转变化（flip）

Filter：fliph（水平翻转）
Filter：flipv（竖直翻转）

例
.flip1{
      filter:fliph;      /* 水平翻转 */
}

.flip2{
      filter:flipv;      /* 竖直翻转 */
}

.flip3{
      filter:flipv fliph;      /* 水平、竖直同时翻转 */
}

效果

光晕（glow）

Glow滤镜能使文字和图片实现发光的特效

语法 filter：glow（color=#，strength=#）color是发光颜色，strength是发光的强度，参数值从1~255.

例

filter:glow(color=#FFFF99,strength=6);      /* 发×××光 */

效果

灰度（Gray）

灰度Gray滤镜能轻松将彩×××片变成黑白图片。语法 filter：gray 可直接作用于图片上。

例.gray{
      filter:gray;      /* 黑白图片 */
}

效果

反色（Invert）

Invert滤镜就是把对象的可视化属性全部翻转，包括色彩，饱和度和亮度等，相当于相片底色的效果。 语法 filter：invert

例.invert{
      filter:invert;    /* 底片效果 */
}

效果

遮罩（mask）

Mask滤镜相当于为对象建立一个覆盖在其表面的膜，实现一种颜色框架的效果。

语法 filter：mask（color=#）

例
.mask{
      filter:mask(color=#8888FF); /* 遮罩效果 */
}

效果

阴影（shadow）可以在指定的方向上建立物体的连续投影

语法 filter：shadow（color=#，direction=#）； color是设置阴影的颜色，direction是设置阴影的方向。该方向是按照顺时针方向进行的。0度代表垂直向上，每45度一个单位。

例 为了与dropshadow对比

.shadow{
      filter:shadow(color=#CCCCFF,direction=135);    /* 阴影效果 */
}

.drop{
      filter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true);
      /* 下落阴影 */
}

效果

X射线 该滤镜仿佛给图片X光照射的感觉 语法 filter：Xray

例 为了与gray滤镜对比
.xray{
      filter:xray;      /* X光效果 */
}
.gray{
      filter:gray;      /* 黑白效果 */
}

效果

浮雕纹理（Emboss Engrave）

语法 filter:progid:DXImageTransform.microsoft.emboss(enabled=#，bias=#);

    filter:progid:DXImageTransform.microsoft.engrave（enabled=#，bias=#);
enabled的值可以是ture false，分别表示滤镜的开启与关闭，默认值为ture。Bias设置添加到滤镜结果的每种颜色成分值的百分比，取值为-1~1，此值大则产生高光滤镜效果。对于高对比度的图片而言，该值对滤镜的结果影响较小。

.emboss 产生凹陷的浮雕效果engrave 产生凸出的浮雕效果

例

filter:progid:DXImageTransform.microsoft.emboss(bias=0.5);

filter:progid:DXImageTransform.microsoft.engrave(bias=0.5);

效果

波浪（wave 该滤镜可以为对象添加竖直向上的波浪效果，也可以把对象按照竖直的波纹样式打乱

语法filter:wave(add=#,freq=#,lightstrength=#,phase=#,strength=#)

Add参数有二个，add=1表示显示愿对象，add=0表示不显示原对象。Freq参数指生成波纹的频率，也就是在指定的对象上共需要产生多少个完整的波纹。Lightstrength参数是指为了增强波纹光的效果。参数为0~100. phase参数用来设置正弦波开始的偏移量。范围0~100，这个值代表开始时的偏移量占波长的百分比。Strength为振幅的大小。

例
span.wave1{ 
      filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);
}

span.wave2{ 
      filter:wave(add=0,freq=4,lightstrength=20,phase=25,strength=5);
}

span.wave3{ 
      filter:wave(add=1,freq=4,lightstrength=60,phase=0,strength=6);
}

效果

如果wave滤镜与flip alpha滤镜同时使用，可以制作倒影效果

例

three{
filter:flipv alpha(opacity=80) wave(add=0, freq=15, lightstrength=30, phase=0, strength=4);
/* 同时使用三个滤镜 */
/* 竖直翻转、透明、波浪效果 */
}

效果

多滤镜同时使用可以实现更多效果，大家实践去发现！！！