css 滤镜
Filter: 滤镜名称（参数1，参数2）
滤镜所适用的元素
BODY
网页主体元素
BUTTON
设置窗口区域的按钮
DIV
可在网页上用来定义区域范围
IMG
通常用来将图片传入到网页中
INPUT
输入窗体区域
MARQUEE
移动字模效果
SPAN
可在网页上定义区域范围
TABLE
建立表格
TD
表格中的单元格
TEXTAREA
文本框区域
TFOOT
多行输入文本框区域
TH
表格中的标题单元格
THEAD
表格中的标题
TR
表格中的行
滤镜的种类：
l 视觉滤镜 只可达到静态的特效效果。只需在网页内使用CSS的定义语法即可。
l 转换滤镜 是用于两个画面进行转换是所使用的特效，将产生动态效果，除CSS外还需了解SCRIPT语言。
视觉滤镜
视觉滤镜的种类：
Alpha
透明的渐变效果
Blur
快速移动的模糊效果
Chroma
特定颜色的透明效果
DropShadow
阴影效果
FlipH
水平翻转效果
FlipV
垂直翻转效果
Glow
边缘光晕效果
Gray
灰度效果
Invert
将颜色的饱和度以及亮度值完全反转，建立底片效果
Light
加入光源投射效果
Mask
屏蔽效果
Shadow
渐层阴影效果
Wave
加入波浪变形效果
Xray
加入轮廓效果
Alpha滤镜
Opacity
开始时的透明度。0（完全透明）~100（完全不透明）
finishOpacity
结束时的透明度。0（完全透明）~100（完全不透明）
style
渐变的形状。0：均匀；1：直线；2：圆形；3：矩形
startX
渐变开始时的X坐标，度量单位为图片宽度的百分比
startY
渐变开始时的Y坐标，度量单位为图片高度的百分比
finishX
渐变结束时的X坐标，度量单位为图片宽度的百分比
finishY
渐变结束时的Y坐标，度量单位为图片高度的百分比
Eg) style= “filter: Alpha(style=1)”
style=“filter:Alpha(style=1,opacity=100,finishopacity=0,startX=0,startY=0,finishX=50,
finishY=50)”>
Blur滤镜
add
是否要显示原来的对象
0（不显示）1（显示）。默认值为1
direction
动态模糊效果的方向
总单位为360度，0代表垂直向上，并以每45度为一个单位，默认值为270度
strength
动态模糊效果的大小，表示有多少象素的大小会被影响
以整数来设置，默认值为5px
Eg) style= “filter: blur(add=0,direction=90,strength=20)”
//不显示原来的图片，且以90度的方向模糊20px
Chroma滤镜
可以指定对象中的某个颜色为透明效果
color
指定对象中要变为透明的颜色
以#rrggbb的格式设置
Eg) style= “filter: chroma(color=#ceff9c)”
Dropshadow滤镜
设置对象产生阴影效果
Color
设置阴影颜色
以#rrggbb的格式
Offx
阴影相对于原始对象的水平位移量
设置值为整数，单位为像素。若水平往右移，则正数；反之为负数。
Offy
阴影相对于原始对象的垂直位移量
设置值为整数，单位为像素。若垂直往下移，则正数；反之为负数。
positive
设置阴影的透明度
0（透明）1（不透明）
Eg) style= “filter: dropshadow(color=pink,offx=-5,offy=-5,positive=1)”
FlipH, FlipV滤镜 (v: vertical垂直)
Eg) Style= “filter: FlipH” //水平翻转
Style= “filter: FlipV” //垂直翻转
Style= “filter: FlipH” //水平翻转
Glow滤镜
设置对象产生边缘光晕的模糊效果
Color
设置边缘光晕的颜色
以#rrggbb的格式，或名称
strength
设置边缘光晕的强度大小
设置值为1~255的整数
Eg) style= “filter: glow(color=yellow,strength=10)”
/*要在图片上设置文字或对象的阴影效果时，请记得该图片需存储为gif文件，且背景颜色设为透明，否则无法看出阴影效果。*/
Gray滤镜 (gray 灰色)
将对象中的颜色去除，以变成黑白的效果，gray滤镜并无参数
Eg) Style= “filter: gray”
Invert滤镜 （invert 使反转）
将颜色的 度以及亮度值完全反转，类似于底片效果，invert滤镜并无参数。
Eg) style= “filter: invert”
Light滤镜
Mask滤镜 (mask 掩饰，假面具)
设置对象的屏蔽效果，就好象印章一样印出模型的模样。
color
设置屏蔽的颜色
以#rrggbb为格式，或名称
Eg) style= “filter: mask(color=#0000ff)” //将设置对象使用蓝色屏蔽效果
Shadow滤镜
除了具备DropShadow的阴影效果外，它还多了阴影渐变的特效。
Color
设置阴影的颜色
以#rrggbb为格式，或名称
direction
设置阴影的方向
总单位为360度，0代表垂直向上，并以每45度为一个单位，默认为225度
Wave滤镜
设置对象产生垂直的波浪效果
Add
是否显示原来的对象
0（不显示）1（显示）默认是0
Freq
设置出现在对象上的波浪数目
以正数设置
Strength
设置波浪的振幅大小
单位为像素，数值为正数
Lightstrength
设置波浪上光的照射强度
0（弱）~100（强）
phase
设置正玄波起始波形位置
0~100（相当将360度，划分为100份）
Eg) style= “filter: wave(add=1,freq=3,strength=50,lightstrength=50,phase=100)”
//设置显示对象，有3个振幅为50像素的波浪，其光的强度为50，波浪的起始位置为100
Xray滤镜
让对象显示轮廓加亮，有点类似X光片的效果
Eg) style= “filter: xray”
转换滤镜
转换滤镜的种类：
融合转换滤镜(Blend Transition Filter)：此滤镜用于执行淡入或淡出
揭示转换滤镜(Reveal Transition Filter)：以揭示的方式进行转换
融合转换滤镜(Blend Transition Filter)
Duration
滤镜转换的延迟时间
数字(秒为单位)
Enabled
滤镜效果是否打开
0（打开）1（关闭 ）
Percent
设置动态滤镜时，停止在进度的百分之几
整数
Status
滤镜转换的状态
0（转换滤镜已停止）
1（转换滤镜已经调用）
2（转换滤镜正在执行）
Eg) Style= “filter:blendTrans(duration=2)”
//2是指延迟时间为2秒
滤镜所适用的元素
BODY
网页主体元素
BUTTON
设置窗口区域的按钮
DIV
可在网页上用来定义区域范围
IMG
通常用来将图片传入到网页中
INPUT
输入窗体区域
MARQUEE
移动字模效果
SPAN
可在网页上定义区域范围
TABLE
建立表格
TD
表格中的单元格
TEXTAREA
文本框区域
TFOOT
多行输入文本框区域
TH
表格中的标题单元格
THEAD
表格中的标题
TR
表格中的行
滤镜的种类：
l 视觉滤镜 只可达到静态的特效效果。只需在网页内使用CSS的定义语法即可。
l 转换滤镜 是用于两个画面进行转换是所使用的特效，将产生动态效果，除CSS外还需了解SCRIPT语言。
视觉滤镜
视觉滤镜的种类：
Alpha
透明的渐变效果
Blur
快速移动的模糊效果
Chroma
特定颜色的透明效果
DropShadow
阴影效果
FlipH
水平翻转效果
FlipV
垂直翻转效果
Glow
边缘光晕效果
Gray
灰度效果
Invert
将颜色的饱和度以及亮度值完全反转，建立底片效果
Light
加入光源投射效果
Mask
屏蔽效果
Shadow
渐层阴影效果
Wave
加入波浪变形效果
Xray
加入轮廓效果
Alpha滤镜
Opacity
开始时的透明度。0（完全透明）~100（完全不透明）
finishOpacity
结束时的透明度。0（完全透明）~100（完全不透明）
style
渐变的形状。0：均匀；1：直线；2：圆形；3：矩形
startX
渐变开始时的X坐标，度量单位为图片宽度的百分比
startY
渐变开始时的Y坐标，度量单位为图片高度的百分比
finishX
渐变结束时的X坐标，度量单位为图片宽度的百分比
finishY
渐变结束时的Y坐标，度量单位为图片高度的百分比
Eg) style= “filter: Alpha(style=1)”
style=“filter:Alpha(style=1,opacity=100,finishopacity=0,startX=0,startY=0,finishX=50,
finishY=50)”>
Blur滤镜
add
是否要显示原来的对象
0（不显示）1（显示）。默认值为1
direction
动态模糊效果的方向
总单位为360度，0代表垂直向上，并以每45度为一个单位，默认值为270度
strength
动态模糊效果的大小，表示有多少象素的大小会被影响
以整数来设置，默认值为5px
Eg) style= “filter: blur(add=0,direction=90,strength=20)”
//不显示原来的图片，且以90度的方向模糊20px
Chroma滤镜
可以指定对象中的某个颜色为透明效果
color
指定对象中要变为透明的颜色
以#rrggbb的格式设置
Eg) style= “filter: chroma(color=#ceff9c)”
Dropshadow滤镜
设置对象产生阴影效果
Color
设置阴影颜色
以#rrggbb的格式
Offx
阴影相对于原始对象的水平位移量
设置值为整数，单位为像素。若水平往右移，则正数；反之为负数。
Offy
阴影相对于原始对象的垂直位移量
设置值为整数，单位为像素。若垂直往下移，则正数；反之为负数。
positive
设置阴影的透明度
0（透明）1（不透明）
Eg) style= “filter: dropshadow(color=pink,offx=-5,offy=-5,positive=1)”
FlipH, FlipV滤镜 (v: vertical垂直)
Eg) Style= “filter: FlipH” //水平翻转
Style= “filter: FlipV” //垂直翻转
Style= “filter: FlipH” //水平翻转
Glow滤镜
设置对象产生边缘光晕的模糊效果
Color
设置边缘光晕的颜色
以#rrggbb的格式，或名称
strength
设置边缘光晕的强度大小
设置值为1~255的整数
Eg) style= “filter: glow(color=yellow,strength=10)”
/*要在图片上设置文字或对象的阴影效果时，请记得该图片需存储为gif文件，且背景颜色设为透明，否则无法看出阴影效果。*/
Gray滤镜 (gray 灰色)
将对象中的颜色去除，以变成黑白的效果，gray滤镜并无参数
Eg) Style= “filter: gray”
Invert滤镜 （invert 使反转）
将颜色的 度以及亮度值完全反转，类似于底片效果，invert滤镜并无参数。
Eg) style= “filter: invert”
Light滤镜
Mask滤镜 (mask 掩饰，假面具)
设置对象的屏蔽效果，就好象印章一样印出模型的模样。
color
设置屏蔽的颜色
以#rrggbb为格式，或名称
Eg) style= “filter: mask(color=#0000ff)” //将设置对象使用蓝色屏蔽效果
Shadow滤镜
除了具备DropShadow的阴影效果外，它还多了阴影渐变的特效。
Color
设置阴影的颜色
以#rrggbb为格式，或名称
direction
设置阴影的方向
总单位为360度，0代表垂直向上，并以每45度为一个单位，默认为225度
Wave滤镜
设置对象产生垂直的波浪效果
Add
是否显示原来的对象
0（不显示）1（显示）默认是0
Freq
设置出现在对象上的波浪数目
以正数设置
Strength
设置波浪的振幅大小
单位为像素，数值为正数
Lightstrength
设置波浪上光的照射强度
0（弱）~100（强）
phase
设置正玄波起始波形位置
0~100（相当将360度，划分为100份）
Eg) style= “filter: wave(add=1,freq=3,strength=50,lightstrength=50,phase=100)”
//设置显示对象，有3个振幅为50像素的波浪，其光的强度为50，波浪的起始位置为100
Xray滤镜
让对象显示轮廓加亮，有点类似X光片的效果
Eg) style= “filter: xray”
转换滤镜
转换滤镜的种类：
融合转换滤镜(Blend Transition Filter)：此滤镜用于执行淡入或淡出
揭示转换滤镜(Reveal Transition Filter)：以揭示的方式进行转换
融合转换滤镜(Blend Transition Filter)
Duration
滤镜转换的延迟时间
数字(秒为单位)
Enabled
滤镜效果是否打开
0（打开）1（关闭 ）
Percent
设置动态滤镜时，停止在进度的百分之几
整数
Status
滤镜转换的状态
0（转换滤镜已停止）
1（转换滤镜已经调用）
2（转换滤镜正在执行）
Eg) Style= “filter:blendTrans(duration=2)”
//2是指延迟时间为2秒
