代码的魔术——CSS滤镜之旅（转帖）

CSS滤镜实际上是CSS一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本、以及其他一些对象，为页面添加一些丰富的变化。如果您有一些脚本语言的基础，能够把滤镜效果与SCRIPT小程序做一些结合，就可以拥有一个CSS FILTER+ SCRIPT建立的强大的动态交互文档工具。

注：只有IE4.0/NC6.0以上的浏览器支持CSS滤镜效果

使用CSS滤镜的方法很简单，只要遵守下面的基本语法规则就行了：
filter:filtername(parameters)　即 filter:滤镜名称（参数）
下面我们将详细讲述每种滤镜的使用方法和精彩效果，大家还可以研究一下，将他们组合起来，得出各种曼妙的效果。
Alpha 设置不同的透明度变化效果
Blur 建立模糊效果
DropShadow 建立一种偏移的影象轮廓，即投射阴影
FlipH 水平翻转
FlipV 垂直翻转
Glow 为对象的边界增加色彩光效
Gray 将图片以灰度形式显示
Invert 将色彩、饱和度以及亮度值完全反转,类似底片效果
Light 在一个对象上进行灯光投影
Mask 为一个对象建立彩色透明遮罩
Shadow 为对象建立轮廓的影效果
Wave 在X轴和Y轴方向利用正弦波打乱图片
Xray 只显示对象的轮廓

⑴Alpha

　功能：改变元素的透明度
　语法：{filter: Alpha(Opacity=*, FinishOpacity=*, Style=*, StartX=*,
　　　　 StartY=*, FinishX=*, FinishY=*)}
　说明：Opacity代表透明度水准。范围是0-100，100是完全不透明(默认状态下所有
　　　　元素都是完全不透明)，0是完全透明。
　　　　FinishOpacity是一个可选参数，如果想要设置渐变的透明效果，就可以用它
　　　　来指定结束时的透明度。范围也是0-100。
　　　　Style参数决定的是透明区域的形状，其中0代表统一形状，1代表线形，2代表
　　　　放射状，3代表长方形。
　　　　StartX是透明效果开始时的X坐标，FinishX是结束时的X坐标。
　　　　StartY与FinishY同理。
　例子：透明度

⑵Blur

　功能：模糊画面
　语法：{filter: blur(add=*, direction=*, strength=*)}
　说明：add=true或false，决定是否使用印象派的模糊效果。
　　　　模糊效果是顺时针进行的，direction这个参数用来设置模糊的方向，范围
　　　　是0-360，其中0是垂直向上。
　　　　strength的值是一个整数，代表模糊的宽度，默认值是5，范围是1-255。
　例子：模糊(动态)

⑶FlipH 和 FlipV

　功能：FilpH是水平翻转对象，FilpV是竖直翻转
　语法：{filter: FlipH} 或 {filter: FlipV}
　例子：翻转


⑷Grow

　功能：令对象边缘产生“发光”的效果
　语法：{filter: Grow(Color=*, Strength=*)}
　说明：Color是指定发光的颜色，Strength表示发光的强度，范围是1-255。
　例子：边缘发光

⑸Shadow

　功能：在指定方向建立物体的投影
　语法：{filter: Shadow(Color=*, Direction=*)}
　说明：Color是投影的颜色，Direction是影子投向的方向，范围是0-360，其中0代表
　　　　垂直向上。

⑹DropShadow

　功能：近似于Shadow
　语法：{Filter: DropShadow(Color=*, OffX=*, OffY=*, Positive=*)}
　说明：Color是阴影的颜色。OffX和OffY就是阴影在X方向和Y方向的偏移量。
　　　　Positive的值是一个布尔值，如果值为"true"，那么就为任何的非透明像素
　　　　建立可见的投影；如果是"false"，那么就为透明的像素部分建立可见的投影
　　　　要注意的是，虽然Dropshadow和Shadow功能很像，但是Shadow是真正的
　　　　投影，而DropShadow只不过是建立一个偏移量，并加上颜色而已。
　例子： DropShadow和Shadow功能对比

⑺Wave

　功能：将对象按照垂直的波形样式打乱
　语法：{Filter: Wave(Add=*, Freq=*, LightStrength*, Phase=*, Strength=*)}
　说明：Add属性值默认为true，表示添加该滤镜，也可以设为false，表示不添加。
　　　　freq是波纹的频率，也就是指定这个对象上面一共有多少个完整的波纹。
　　　　LightStrength表示波纹中波峰的亮度，范围是0-100。
　　　　Phase用来设置正弦波开始时的偏移量，默认是0，范围是0-100，这个数值代
　　　　表开始时的波长取自波长的百分比值，例如如果值为25那么正弦波就从90度
　　　　的方向开始。
　　　　Strength表示波的振幅大小。
　例子：波动