资源描述：
《10章-使用CSS中的滤镜》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、目标:使用CSS中的滤镜内容：透明层次滤镜（Alpha）模糊滤镜（Blur）运动模糊（MotionBlur）固定阴影滤镜（dropshadow）移动阴影滤镜（shadow）镜像滤镜（flip）光晕滤镜（glow）灰度滤镜（gray）反色滤镜（invert）x射线滤镜（x-ray）遮罩滤镜（mask）波纹滤镜（wave）CSS滤镜是微软公司开发的整合在IE浏览器中的功能。所谓滤镜就是对图片产生一定的图形变换效果。由于这套CSS滤镜是微软公司开发，版权属于微软公司，所以其他浏览器并不支持CSS滤镜。而IE浏览器广泛使用，因此许多网页设计师都经常使用CSS滤镜来为图片增效。本章主要介绍CSS滤
2、镜的使用方法。本章内容包括：CSS滤镜的介绍和应用滤镜概述设置滤镜的CSS属性为filterFilter:filtername(parameters);CSS滤镜的标识符滤镜的属性用于指定滤镜的属性参数值，决定了滤镜的效果滤镜分两种：基本滤镜：直接作用于对象上产生效果的滤镜，也叫视觉滤镜高级滤镜：需要用JAVASCRIPT等脚本才能产生的变化效果，又叫转换滤镜滤镜的值和效果见P228表10-21.透明层次滤镜（Alpha）filter:alpha(opacity=30finishopacity=100,style=1,startx=0,starty=0,finishx=0,finishy
3、=100);属性值见P229表10-3打开10-1.html，在本例中要为名为middle的DIV中的内容加滤镜效果。代码如下：Filter:alpha(opacity=30);-----设置透明度预览效果，用IE预览。继续添加其他滤镜代码：filter:alpha(opacity=30finishopacity=100,style=1,startx=0,finishx=0,finishy=100);效果设置是从上到下的渐变效果，透明度油30渐变到100，预览效果Style设置为2时的效果：filter:alpha(opacity=0finishopacity=80,style=2,st
4、artx=0,finishx=0,finishy=100);Style设置为3时的效果：filter:alpha(opacity=0finishopacity=100,style=3,startx=0,finishx=0,finishy=100);2.模糊滤镜（Blur）模糊滤镜能使图片变得朦胧，运用得当可得到诸如高速移动的动态效果。.blur{Filter:progid:DXImageTransform.Microsoft.Blur(makeshadow,Pixelradius=pixelradius:Shadowopacity=shadowopacity);}Blur滤镜属性值见表1
5、0-4接上例中，在middle中加代码如下：Filter:progid:DXImageTransform.Microsoft.Blur(makeshadow=flase,pixelradius=5);IE预览效果3运动模糊（MotionBlur）语法见书P232：属性值见表10-5在#middle中添加代码如下：Filter:progid:DXImageTransform.Microsoft.Motionblur(Add=true,Direction=90,Strength=50);效果预览。修改Add=false，然后预览效果4.固定阴影滤镜（dropshadow）语法见书P233：属
6、性值见表10-6在middle中添加如下代码：Filter:dropshadow(color=#d883d8,offx=20,offy=20,positive=true);效果预览(单独创建一个页面使用文字和图片都有效果)5.移动阴影滤镜（shadow）语法见书P234：属性值见表10-7在#Middle中添加代码：Filter:shadow(color=#f00000,direction=135,strength=20);预览（单个页面做图和文字都有效果）6.镜像滤镜（flip）语法见书P234在#middle中添加代码：Filter:flipH;水平翻转Filter:flipv;垂直
7、翻转Filter:flipvfliph;水平翻转和垂直翻转7.光晕滤镜（glow）语法见书P235：属性值见表10-8在#Middle中添加代码如下：Filter:glow(color=#c162e1,strength=10);预览（把图换成文字）8.灰度滤镜（gray）该滤镜可以将对象中的颜色去掉，把具有色彩的对象变成黑白效果，该滤镜没有参数。在#Middle中添加代码：Filter:gray;用IE预览9.反色滤镜（invert
