10章 使用CSS中的滤镜.pptVIP

小结： 本章讲解了CSS滤镜的用法。CSS滤镜只有在IE浏览器上才能生效，大部分滤镜能应用到文字和图片中。本章的重点是在应用滤镜时要区分不同滤镜的效果。本章的难点是对滤镜的各个参数的理解和运用。 目标:使用CSS中的滤镜 内容： 透明层次滤镜（Alpha） 模糊滤镜（Blur） 运动模糊（MotionBlur） 固定阴影滤镜（dropshadow） 移动阴影滤镜（shadow） 镜像滤镜（flip） 光晕滤镜（glow） 灰度滤镜（gray） 反色滤镜（invert） x射线滤镜（x-ray） 遮罩滤镜（mask） 波纹滤镜（wave） CSS滤镜是微软公司开发的整合在IE浏览器中的功能。所谓滤镜就是对图 片产生一定的图形变换效果。由于这套CSS滤镜是微软公司开发，版权属 于微软公司，所以其他浏览器并不支持CSS滤镜。而IE浏览器广泛使用， 因此许多网页设计师都经常使用CSS滤镜来为图片增效。本章主要介绍CSS 滤镜的使用方法。本章内容包括： CSS滤镜的介绍和应用 滤镜概述 设置滤镜的CSS属性为filter Filter:filter name(parameters); CSS滤镜的标识符 滤镜的属性 用于指定滤镜的属性参数值，决定了滤镜的效果 滤镜分两种： 基本滤镜：直接作用于对象上产生效果的滤镜，也叫 视觉滤镜 高级滤镜：需要用JAVASCRIPT等脚本才能产生的变化 效果，又叫转换滤镜 滤镜的值和效果见P228 表10-2 1.透明层次滤镜（Alpha） filter:alpha(opacity=30 finishopacity=100,style=1,startx=0,starty=0,finishx=0, finishy=100); 属性值见P229 表10-3 打开10-1.html，在本例中要为名为middle的DIV中的内容加滤镜效果。代码如下： Filter:alpha(opacity=30);-----设置透明度 预览效果，用IE预览。 继续添加其他滤镜代码： filter:alpha(opacity=30 finishopacity=100,style=1,startx=0, finishx=0, finishy=100); 效果设置是从上到下的渐变效果，透明度油30渐变到100，预览效果 Style设置为2时的效果： filter:alpha(opacity=0 finishopacity=80,style=2,startx=0,finishx=0,finishy=100); Style设置为3时的效果： filter:alpha(opacity=0 finishopacity=100,style=3,startx=0,finishx=0,finishy=100); 2.模糊滤镜（Blur） 模糊滤镜能使图片变得朦胧，运用得当可得到诸如高速移动的动态效果。 .blur{ Filter:progid:DXImageTransform.Microsoft.Blur(makeshadow,Pixelradius= pixelradius:Shadowopacity=shadowopacity); } Blur滤镜属性值见表10-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：属性值见表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); 预览（单个页面做图和文字