第 12章 CSS滤镜
12.1 滤镜简介
12.2 Alpha滤镜
12.3 Blur 滤镜
12.4 Dropshadow滤镜
12.5 Glow滤镜
12.6 Gray,Invert和 Xray滤镜
12.7 FlipH,FlipV滤镜
12.8 Wave滤镜
12.9 Shadow滤镜
12.10 Mask滤镜
12.11 Chroma滤镜
12.12 转换滤镜
12.1 滤镜简介
?滤镜（ Filter）可以用来改变图形的外观，以增加图形的
视觉效果。
?滤镜分为视觉滤镜（ Visual Filters）和转换滤镜
（ Transition Filters）两大类。
?视觉滤镜只可以达到静态的特效效果。
?转换滤镜是用于两画面进行转换时所使用的特效，将产生
动态效果，除了在网页中利用 CSS的定义语法外，还必须配
合 Script语言（如,VBScript,JavaScript）以及事件的
概念，才能自如地使用转换滤镜，产生炫丽的效果。
?由于滤镜功能是在 IE4.0版才开始提供的功能，所以只能
在 IE4.0以上的浏览器中使用，才能实现滤镜的效果。
?CSS的滤镜属性的标识符是 filter。
?书写格式,
filter,filtername（ parameters）
?Filter是滤镜属性选择符。
?filtername是滤镜属性名，包括 alpha、
blur,chroma等
?parameters是表示各个滤镜属性的参数，
也正是这些参数决定了滤镜将以怎样的效果
显示
12.2 Alpha滤镜
Alpha滤镜可以产生颜色透明及渐变的效果。
Alpha滤镜的基本语法如下,
style=,filter,alpha（ opacity=opcity，
finishopacity=finishopacity,style=style，
startX=startX,startY=startY,finishX=finishX，
finishY=finishY）,
Alpha滤镜的参数说明如下
参数名称 说明
opacity 开始时的透明度。设置 0(完全透明 )～ 100(完全不透明 )，
值越大透明度越低。
finishOpacity 结束时的透明度。设置 0(完全透明 )～ 100(完全不透明 )，
值越大透明度越低。
style 渐变的形状。 0:均匀； 1:直线； 2:圆形； 3:矩形
startX 渐变开始时的 X坐标，度量单位为图片宽度的百分比。
startY 渐变开始时的 Y坐标，度量单位为图片高度的百分比。
finishX 渐变结束时的 X坐标，度量单位为图片宽度的百分比。
finishY 渐变结束时的 Y坐标，度量单位为图片高度的百分比。
12.3 Blur 滤镜
Blur滤镜可以产生快速移动的动态模糊效果。
Blur滤镜的基本语法如下,
style=,filter:Blur(add=value,direction=value
,strength=value)”
Blur滤镜的参数说明如下
参数名称 说明 参数值
add 是否要显示原来的对象 0(不显示 ),1(显示 )。默认值为 1，即显示原来的对象。
direction 动态模糊效果的方向
总单位为 360°, 0代表垂直
向上，并以每 45° 为一个单
位，默认值为 270° 。
strength
动态模糊效果的大小，
表示有多少像素的大小
会被影响。
以整数来设置，默认值为
5px。
其中：参数 direction用于设定动态模糊效
果的方向，总单位为 360°, 0代表垂直向上，
并以每 45° 为一个单位，而度数以方向定位时，
将如下图所示。
Dropshadow滤镜用于设置对象产生阴影效果。
Dropshadow滤镜的基本语法如下,
style=,filter:Dropshadow(color=#value,
offx=value,offy=value,positive=value)”
Dropshadow滤镜的参数说明如下
12.4 Dropshadow滤镜
参数名称 说明 参数值
color 设置阴影的颜色 以 #rrggbb的格式，或是指定颜 色名称的方式
offx 阴影相对原始对象 的水平方向偏移量
设置值为整数，单位为像素。若
水平往右移，则为正数；若水平
往左移，则为负数。
offy 阴影相对原始对象 的垂直方向偏移量
设置值为整数，单位为像素。若
垂直往下，则为正数；若垂直往
上移，则为负数。
positive 设置阴影的透明度 0:透明； 1:不透明
Glow滤镜用于设置对象产生边缘光晕的模糊效果。
Glow滤镜的基本语法如下,
style="filter:Glow(color=#value,strength=value),
Glow滤镜的参数说明如下
12.5 Glow滤镜
参数名称 说明 参数值
color 设置边缘光晕的颜
色。
以 #rrggbb的格式，或是指定颜色名
称的方式。
strength 设置边缘光晕的强
度大小。
设置值为 1～ 255的整数。
12.6 Gray,Invert和 Xray滤镜
?gray滤镜主要用于将对象中的颜色除去，把一张图片变
成灰度图。
?Invert滤镜主要用于将色彩、饱和度、亮度值完全反转
?Xray滤镜主要用于让对象显示轮廓加亮，有点类似 X光片
的效果。
三个滤镜的基本语法如下,
style="filter:Gray"
style="filter:Invert"
style="filter:Xray"
这 3个滤镜没有参数。
12.7 FlipH,FlipV滤镜
?FlipH滤镜是设置对象产生水平翻转 180°
?FlipV滤镜是设置对象产生垂直翻转 180°
这两个滤镜的基本语法如下,
style="filter:FlipH"
style="filter:FlipV"
这两个滤镜没有参数。
Wave滤镜主要用于设置对象产生垂直的波浪效果。
Wave滤镜的基本语法如下,
style=,filter:Wave(add=value,freq=value,
lightstrength=value,phase=value,
strength=value)”
Wave滤镜的参数说明如下
12.8 Wave滤镜
参数名称 说明 参数值
add 是否显示原来的对象。 0:不显示； 1:显示。默认值为 0。
freq 设置出现在对象上的波浪数
目。
以正数设置。
strength 设置波浪的振幅大小。 单位为像素，数值为正整数。
lightstrength 设置波浪上光的照射强度。 0(最弱 )～ 100(最强 )。
phase 设置正弦波起始位置。 0～ 100。 (相当于将 360°,化分为
100个等分 )。
Shadow除了具备 DropShadow的阴影效果外，它还多
了阴影渐变的特效。
Shadow滤镜的基本语法如下,
style="filter:Shadow(color=#color,
direction=value)"
Shadow滤镜的参数设置如下表所示。
12.9 Shadow滤镜
18
参数名称 说明 参数值
color 指定对象中要变为透明的颜色。 以 #rrggbb的格式设置，或是指定颜色名称的方式。
direction 设置阴影的方向。 总单位为 360°, 0代表垂直向上，并以45° 为一个单位，其预设为 255° 。
Mask滤镜主要用于设置对象的屏蔽效果，就好象印章
一样印出模型的模样。
Mask滤镜的基本语法如下,
style="filter:Mask(color=#color),
Mask滤镜的参数设置如表 12.7所示。
12.10 Mask滤镜
参数名称 说明 参数值
color 设置屏蔽的颜色。 以 #rrggbb的格式设置，或是指
定颜色名称的方式。
Chroma滤镜主要用于指定对象中的某个颜色，
变为透明效果。
Chroma滤镜的基本语法如下,
style=,filter:Chroma(color=#color)”
Chroma滤镜的参数设置如表 12.8所示。
12.11 Chroma滤镜
参数名称 说明 参数值
color 指定对象中要变为透明
的颜色。
以 #rrggbb的格式设置，或是
指定颜色名称的方式。
?在 IE中，提供了 Blend转换滤镜 和 Reveal转换滤镜
两种转换滤镜，通过这两种滤镜的应用，可以完成图
片或文字以特效方式进行转换。
?Blend转换滤镜 （ Blend Transition Filter） 可以
在指定的时间间隔内实现图像的简单淡出和淡入 。
?Reveal转换滤镜 （ Reveal Tranition Filter） 可
以通过使用不同的技术 有 选择地显示或隐藏图像 。
?转换滤镜一般需要 Script语言配合才能达到效果。
?也可以利用 <meta>标签来实现转换滤镜的效果。
12.12 转换滤镜
语法如下,
<meta http-equiv=,Page-Enter”
content=,RevealTrans(duration=秒数,transition=
特效样式 )” >
<meta http-equiv=,Page-Exit”
content=,RevealTrans(duration=秒数,transition=
特效样式 )” >
<meta http-equiv="Page-Enter "
content="BlendTrans(duration=秒数 )">
<meta http-equiv="Page-Exit"
content="BlendTrans(duration=秒数 )">
说明,
⑴ "page-enter"和 "page-exit"分别表示进入
网页和退出网页。
⑵ duration表示持续时间，单位为秒，范围为
1-30。
⑶ transition表示网页过渡效果的样式,共有
24种 。
12.1 滤镜简介
12.2 Alpha滤镜
12.3 Blur 滤镜
12.4 Dropshadow滤镜
12.5 Glow滤镜
12.6 Gray,Invert和 Xray滤镜
12.7 FlipH,FlipV滤镜
12.8 Wave滤镜
12.9 Shadow滤镜
12.10 Mask滤镜
12.11 Chroma滤镜
12.12 转换滤镜
12.1 滤镜简介
?滤镜（ Filter）可以用来改变图形的外观，以增加图形的
视觉效果。
?滤镜分为视觉滤镜（ Visual Filters）和转换滤镜
（ Transition Filters）两大类。
?视觉滤镜只可以达到静态的特效效果。
?转换滤镜是用于两画面进行转换时所使用的特效，将产生
动态效果，除了在网页中利用 CSS的定义语法外，还必须配
合 Script语言（如,VBScript,JavaScript）以及事件的
概念，才能自如地使用转换滤镜，产生炫丽的效果。
?由于滤镜功能是在 IE4.0版才开始提供的功能，所以只能
在 IE4.0以上的浏览器中使用，才能实现滤镜的效果。
?CSS的滤镜属性的标识符是 filter。
?书写格式,
filter,filtername（ parameters）
?Filter是滤镜属性选择符。
?filtername是滤镜属性名，包括 alpha、
blur,chroma等
?parameters是表示各个滤镜属性的参数，
也正是这些参数决定了滤镜将以怎样的效果
显示
12.2 Alpha滤镜
Alpha滤镜可以产生颜色透明及渐变的效果。
Alpha滤镜的基本语法如下,
style=,filter,alpha（ opacity=opcity，
finishopacity=finishopacity,style=style，
startX=startX,startY=startY,finishX=finishX，
finishY=finishY）,
Alpha滤镜的参数说明如下
参数名称 说明
opacity 开始时的透明度。设置 0(完全透明 )～ 100(完全不透明 )，
值越大透明度越低。
finishOpacity 结束时的透明度。设置 0(完全透明 )～ 100(完全不透明 )，
值越大透明度越低。
style 渐变的形状。 0:均匀； 1:直线； 2:圆形； 3:矩形
startX 渐变开始时的 X坐标，度量单位为图片宽度的百分比。
startY 渐变开始时的 Y坐标，度量单位为图片高度的百分比。
finishX 渐变结束时的 X坐标，度量单位为图片宽度的百分比。
finishY 渐变结束时的 Y坐标，度量单位为图片高度的百分比。
12.3 Blur 滤镜
Blur滤镜可以产生快速移动的动态模糊效果。
Blur滤镜的基本语法如下,
style=,filter:Blur(add=value,direction=value
,strength=value)”
Blur滤镜的参数说明如下
参数名称 说明 参数值
add 是否要显示原来的对象 0(不显示 ),1(显示 )。默认值为 1，即显示原来的对象。
direction 动态模糊效果的方向
总单位为 360°, 0代表垂直
向上，并以每 45° 为一个单
位，默认值为 270° 。
strength
动态模糊效果的大小，
表示有多少像素的大小
会被影响。
以整数来设置，默认值为
5px。
其中：参数 direction用于设定动态模糊效
果的方向，总单位为 360°, 0代表垂直向上，
并以每 45° 为一个单位，而度数以方向定位时，
将如下图所示。
Dropshadow滤镜用于设置对象产生阴影效果。
Dropshadow滤镜的基本语法如下,
style=,filter:Dropshadow(color=#value,
offx=value,offy=value,positive=value)”
Dropshadow滤镜的参数说明如下
12.4 Dropshadow滤镜
参数名称 说明 参数值
color 设置阴影的颜色 以 #rrggbb的格式，或是指定颜 色名称的方式
offx 阴影相对原始对象 的水平方向偏移量
设置值为整数，单位为像素。若
水平往右移，则为正数；若水平
往左移，则为负数。
offy 阴影相对原始对象 的垂直方向偏移量
设置值为整数，单位为像素。若
垂直往下，则为正数；若垂直往
上移，则为负数。
positive 设置阴影的透明度 0:透明； 1:不透明
Glow滤镜用于设置对象产生边缘光晕的模糊效果。
Glow滤镜的基本语法如下,
style="filter:Glow(color=#value,strength=value),
Glow滤镜的参数说明如下
12.5 Glow滤镜
参数名称 说明 参数值
color 设置边缘光晕的颜
色。
以 #rrggbb的格式，或是指定颜色名
称的方式。
strength 设置边缘光晕的强
度大小。
设置值为 1～ 255的整数。
12.6 Gray,Invert和 Xray滤镜
?gray滤镜主要用于将对象中的颜色除去，把一张图片变
成灰度图。
?Invert滤镜主要用于将色彩、饱和度、亮度值完全反转
?Xray滤镜主要用于让对象显示轮廓加亮，有点类似 X光片
的效果。
三个滤镜的基本语法如下,
style="filter:Gray"
style="filter:Invert"
style="filter:Xray"
这 3个滤镜没有参数。
12.7 FlipH,FlipV滤镜
?FlipH滤镜是设置对象产生水平翻转 180°
?FlipV滤镜是设置对象产生垂直翻转 180°
这两个滤镜的基本语法如下,
style="filter:FlipH"
style="filter:FlipV"
这两个滤镜没有参数。
Wave滤镜主要用于设置对象产生垂直的波浪效果。
Wave滤镜的基本语法如下,
style=,filter:Wave(add=value,freq=value,
lightstrength=value,phase=value,
strength=value)”
Wave滤镜的参数说明如下
12.8 Wave滤镜
参数名称 说明 参数值
add 是否显示原来的对象。 0:不显示； 1:显示。默认值为 0。
freq 设置出现在对象上的波浪数
目。
以正数设置。
strength 设置波浪的振幅大小。 单位为像素，数值为正整数。
lightstrength 设置波浪上光的照射强度。 0(最弱 )～ 100(最强 )。
phase 设置正弦波起始位置。 0～ 100。 (相当于将 360°,化分为
100个等分 )。
Shadow除了具备 DropShadow的阴影效果外，它还多
了阴影渐变的特效。
Shadow滤镜的基本语法如下,
style="filter:Shadow(color=#color,
direction=value)"
Shadow滤镜的参数设置如下表所示。
12.9 Shadow滤镜
18
参数名称 说明 参数值
color 指定对象中要变为透明的颜色。 以 #rrggbb的格式设置，或是指定颜色名称的方式。
direction 设置阴影的方向。 总单位为 360°, 0代表垂直向上，并以45° 为一个单位，其预设为 255° 。
Mask滤镜主要用于设置对象的屏蔽效果，就好象印章
一样印出模型的模样。
Mask滤镜的基本语法如下,
style="filter:Mask(color=#color),
Mask滤镜的参数设置如表 12.7所示。
12.10 Mask滤镜
参数名称 说明 参数值
color 设置屏蔽的颜色。 以 #rrggbb的格式设置，或是指
定颜色名称的方式。
Chroma滤镜主要用于指定对象中的某个颜色，
变为透明效果。
Chroma滤镜的基本语法如下,
style=,filter:Chroma(color=#color)”
Chroma滤镜的参数设置如表 12.8所示。
12.11 Chroma滤镜
参数名称 说明 参数值
color 指定对象中要变为透明
的颜色。
以 #rrggbb的格式设置，或是
指定颜色名称的方式。
?在 IE中，提供了 Blend转换滤镜 和 Reveal转换滤镜
两种转换滤镜，通过这两种滤镜的应用，可以完成图
片或文字以特效方式进行转换。
?Blend转换滤镜 （ Blend Transition Filter） 可以
在指定的时间间隔内实现图像的简单淡出和淡入 。
?Reveal转换滤镜 （ Reveal Tranition Filter） 可
以通过使用不同的技术 有 选择地显示或隐藏图像 。
?转换滤镜一般需要 Script语言配合才能达到效果。
?也可以利用 <meta>标签来实现转换滤镜的效果。
12.12 转换滤镜
语法如下,
<meta http-equiv=,Page-Enter”
content=,RevealTrans(duration=秒数,transition=
特效样式 )” >
<meta http-equiv=,Page-Exit”
content=,RevealTrans(duration=秒数,transition=
特效样式 )” >
<meta http-equiv="Page-Enter "
content="BlendTrans(duration=秒数 )">
<meta http-equiv="Page-Exit"
content="BlendTrans(duration=秒数 )">
说明,
⑴ "page-enter"和 "page-exit"分别表示进入
网页和退出网页。
⑵ duration表示持续时间，单位为秒，范围为
1-30。
⑶ transition表示网页过渡效果的样式,共有
24种 。
