第12章 CSS滤镜

《第12章 CSS滤镜》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第12章CSS滤镜12.1滤镜简介12.2Alpha滤镜12.3Blur滤镜12.4Dropshadow滤镜12.5Glow滤镜↓目录Ⅱ12.6Gray、Invert和Xray滤镜12.7FlipH，FlipV滤镜12.8Wave滤镜12.9Shadow滤镜12.10Mask滤镜12.11Chroma滤镜12.12转换滤镜↑目录Ⅰ上一页下一页目录结束本节12.1滤镜简介滤镜（Filter）是ＣＳＳ技术的一种应用，它可以用来改变图形的外观，以增加图形的视觉效果。滤镜分为视觉滤镜（VisualFilters）和转换滤镜（TransitionFilters

2、）两大类。视觉滤镜只可以达到静态的特效效果。只需在网页内使用CSS的定义语法，即可将此滤镜效果加到网页内。转换滤镜是用于两画面进行转换时所使用的特效，将产生动态效果，除了在网页中利用CSS的定义语法外，还必须配合Script语言（如：VBScript、JavaScript）以及事件的概念，才能自如地使用转换滤镜，产生炫丽的效果。由于滤镜功能是在IE4.0版才开始提供的功能，所以只能在IE4.0以上的浏览器中使用，才能实现滤镜的效果。CSS的滤镜很多，下面我们就对常用的一些CSS滤镜作一些介绍。上一页下一页目录结束本节12.2Alpha滤镜Alpha滤

3、镜可以产生颜色透明及渐变的效果。Alpha滤镜的基本语法如下：style="filter:Alpha（opacity=value，style=value）“Alpha滤镜的参数设置如下表所示。上一页下一页目录结束本节参数名称说明opacity开始时的透明度。设置0(完全透明)～100(完全不透明)，值越大透明度越低。finishOpacity结束时的透明度。设置0(完全透明)～100(完全不透明)，值越大透明度越低。style渐变的形状。0:均匀；1:直线；2:圆形；3:矩形startX渐变开始时的X坐标，度量单位为图片宽度的百分比。startY渐变

4、开始时的Y坐标，度量单位为图片高度的百分比。finishX渐变结束时的X坐标，度量单位为图片宽度的百分比。finishY渐变结束时的Y坐标，度量单位为图片高度的百分比。上一页下一页目录结束本节12.3Blur滤镜Blur滤镜可以产生快速移动的动态模糊效果。Blur滤镜的基本语法如下：style="filter:Blur(add=value,direction=value,strength=value)“Blur滤镜的参数设置如下表所示。上一页下一页目录结束本节参数名称说明参数值add是否要显示原来的对象0(不显示)、1(显示)。默认值为1，即显示原来

5、的对象。direction动态模糊效果的方向总单位为360°，0代表垂直向上，并以每45°为一个单位，默认值为270°。strength动态模糊效果的大小，表示有多少像素的大小会被影响。以整数来设置，默认值为5px。上一页下一页目录结束本节其中：参数direction用于设定动态模糊效果的方向，总单位为360°，0代表垂直向上，并以每45°为一个单位，而度数以方向定位时，将如下图所示。上一页下一页目录结束本节Dropshadow滤镜用于设置对象产生阴影效果。Dropshadow滤镜的基本语法如下：style="filter:Dropshadow(co

6、lor=#value,offx=value,offy=value,positive=value)“Dropshadow滤镜的参数设置如下表所示。12.4Dropshadow滤镜上一页下一页目录结束本节参数名称说明参数值color设置阴影的颜色以#rrggbb的格式，或是指定颜色名称的方式offx阴影相对原始对象的水平方向偏移量设置值为整数，单位为像素。若水平往右移，则为正数；若水平往左移，则为负数。offy阴影相对原始对象的垂直方向偏移量设置值为整数，单位为像素。若垂直往下，则为正数；若垂直往上移，则为负数。positive设置阴影的透明度0:透明；

7、1:不透明上一页下一页目录结束本节Glow滤镜用于设置对象产生边缘光晕的模糊效果。Glow滤镜的基本语法如下：style="filter:Glow(color=#value，strength=value)"Glow滤镜的参数设置如下表所示。12.5Glow滤镜参数名称说明参数值color设置边缘光晕的颜色。以#rrggbb的格式，或是指定颜色名称的方式。strength设置边缘光晕的强度大小。设置值为1～255的整数。上一页下一页目录结束本节12.6Gray、Invert和Xray滤镜Gray滤镜主要用于将对象中的颜色除去，以变成黑白的效果。Inve

8、rt滤镜主要用于将颜色的饱和度以及亮度值完全反转，类似底片效果。Xray滤镜主要用于让对象显示轮廓加亮，有点