1、第13 章 CSS滤镜,赵海燕 ,1. 滤镜概述,1.1 滤镜语法,滤镜并不是浏览器中的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。 CSS属性：filter:filtername(parameters); CSS滤镜的标识符是“filter”，进行滤镜操作必须先定义filter；filtername是滤镜属性名，包括alpha、blur和chroma等多种属性；parameters是表示各个滤镜属性的参数。,1.2 基本滤镜,通道（ Alpha ）； 模糊效果（Blur）； 移动模糊（Motion Blur）； 透明色（Chroma
2、）； 下落阴影（Drop Shadow）； 对称变换（Flip）； 光晕（Glow）； 灰度（Grayscale）； 反色（Invert）； 遮罩（Mask）； 阴影（Shadow）； X光效果（X-ray）； 浮雕（Emboss、Engrave）； 波浪（Wave）。,2. 通道（Alpha）,2.1 表达式,表达式： filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY); opacity
3、：透明度等级，可选值从0-100，0代表完全透明； style：透明区域的形状特征，0代表统一形状，1代表线形，2代表圆形放射渐变，3代表矩形放射渐变。 当style为2或者3的时候， startX和stratY等坐标参数便没有意义，都是以图片中心为起始，四周为结束。,2.2 实例,实例：13-1.html实例：13-2.html,2.2 实例,实例：13-3.html实例：13-4.html,3. 模糊效果（Blur）,3.1 表达式,表达式：filter:progid:DXImageTransform.Microsoft.Blur(makeshadow=makeshadow,pixelra
4、dius=pixelradius,shadowopacity=shadowopcity); makeshadow：设置对象的内容是否被处理为阴影； pixelradius：设置模糊效果的作用深度； shadowopacity：设置使用makeshadow制作成的阴影透明度。,3.2 实例,实例：13-5.html,4. 运动模糊（Motion Blur）,4.1 表达式,表达式： filter:progid:DXImageTransform.Microsoft.MotionBlur(add=add,direction=direction,strength=strength); add:指定是否
5、叠加原图片，有true和false两个值； direction：设置模糊的方向，顺时针，0代表垂直向上，每45度一个单位，默认值是向左270度。 strength：代表有多少像素的宽度将受到模糊影响，默认值是5px。,4.2 实例,实例：13-6.html,5. 透明色（Chorma）,表达式： filter:chroma(color=color); color：需要使之透明的颜色。 实例：13-7.html,6. 下落的阴影（Dropshadow）,6.1 表达式,表达式： filter:dropshadow(color=color,offx=offx,offy=offy,positive=
6、positive); color：投射阴影的颜色； offx、offy：x方向和y方向阴影的偏移量，整数值。 positive：true代表为任何非透明像素建立可见的投影，false为透明的像素部分建立可见的投影。,6.2 实例,实例：13-8.html实例：13-9.html,7. 翻转变换（Flip）,表达式： filter:fliph /* 水平翻转 */ filter:flipv /* 垂直翻转 */ 实例：13-10.html,8. 光晕（Glow）,表达式： filter:Glow(color=color,strength=strength); color：发光的颜色； stren
7、gth：发光的强度，取1-255。 实例：13-11.html,9. 灰度（Gray）,表达式： filter:gray; 实例：13-12.html,10. 反色（Invert）,表达式： filter:invert; 实例：13-13.html,11. 遮罩（Mask）,表达式： filter:mask(color=color); color: 掩膜的颜色。 实例：13-14.html,12. 阴影（Shadow）,表达式： filter:shadow(color=color,direction=direction); Color：设置阴影的颜色； Direction：阴影的方向，顺时针，
8、0代表垂直向上。 实例：13-15.html,13. X射线（X-ray）,表达式： filter:xray; 实例：13-16.html,14. 浮雕纹理（Emboss、Engrave）,14.1 表达式,表达式： Filter:progid:DXImageTransform.Microsoft.emboss(enabled=enabled,bias=bias); /* 产生凹陷的浮雕效果 */ Filter:progid:DXImageTransform.Microsoft.engrave(enabled=enabled,bias=bias); /* 产生凸出的浮雕效果 */ enable
9、d：true或false，对于滤镜的开启和关闭； bias：设置添加到滤镜结果的每种颜色成分值的百分比，取值范围为-1到1。,14.2 实例,实例：13-17.html反选效果：,15. 波浪（Wave）,15.1 表达式,表达式： Filter:wave(add=add,freq=freq,lightstrength=lightstrength,phase=phase,strength=strength); add:1代表原对象，0代表不显示原对象； freq:生成波纹的频率； lightstrength:使波纹增强光的效果，参数值为0-100； phase：设置正弦波开始的偏移量，参数值0-100，代表开始时的偏移量占波长的百分比。 strength：振幅的大小。,15.2 实例,实例：13-18.html,15.3 练习滤镜综合,要求：使用几种滤镜综合起来实现如下倒影效果：,
