css滤镜
CSS滤镜
１：滤镜功能简介
滤镜(filter)是CSS技术的一种应用，它可以用来改变图形的外观，以增加图形的视觉效果。
滤镜分为视觉滤镜visual filters的转换滤镜 transition filters两大类
视频滤镜只可以达到静态的特效效果，只需在网页内使用CSS的定义语法，即可将此滤镜效果加到网页内。
转换滤镜是用于两个画面进行转换时所使用的特效，将产生动态效果，除了在网页中利用CSS的定义语法外，还必须配合script语言，及事件的概念，才能自如地使用转换滤镜，产生绚丽的效果
２：alpha滤镜
可产生颜色透明和渐变的效果
Style=”filter:Alpha(opacity=value,style=value)”
Opacity开始时的透明度，设置０完全透明~１００完全不透明，值越大透明度越低
Finishopacity 结束时的透明度，设置0~１００
Style 渐变的形状 0:均匀，１：直线，２：圆形 ３：矩形
startX 渐变开始时的X坐标，度量单位为图片宽度的百分比。
StartY Y坐标 高度
finishX 渐变结束时的X坐标，单位为图片宽度的百分比
finishY 渐变结束时的Y坐标，单位为图片高度的百分比。
<td><img src="暴风截屏20090511212501.bmp" /></td>
<td><img src="暴风截屏20090511212501.bmp" style="filter:Alpha(style=0,opacity=50)"/></td>
<td><img src="暴风截屏20090511212501.bmp" style="filter:Alpha(style=1)" /></td>
</tr>
<tr align="center"><td>圆形渐变</td><td></td><td>矩形渐变</td></tr>
<tr align="center">
<td><img src="暴风截屏20090511212501.bmp" style="filter:Alpha(style=2)" /></td>
<td></td>
<td><img src="暴风截屏20090511212501.bmp" style="filter:Alpha(style=3)" /></td>
3:blur滤镜
可以产生快速移动的动态模糊效果。Blur滤镜的基本语法格式如下：
Style:”filter:Blur{add=value,direction=value,strength=value”}
Add 是否要显示原来的对象 0(不显示)和1(显示)，默认值为1,即显示原来的对象
Direction 动态模糊效果的方向 总单位为360.0代表垂直向上，并以每45为一个单位，默认值为270。
Strength 动态模糊效果的大小，表示有多少像素的大小会被影响 以整数来设置，默认值为5px
<div style="width:262;height:85;filter:Blur(direction=45,strength=88)"> //不起作用
4:Dropshadow滤镜、
用于设置对象产生阴影效果。Dropshadow滤镜的基本语法格式如下：
Style=”filter:Dropshadow(color=#value,offx=value,offy=value,positive=value)”
Color设置阴影的颜色，
Offx阴影相对原始对象的水平方向偏移量 设置为整数，单位为像素，若水平往右移，则为正数，若水平往左移，则为负数
Offy 阴影相对原始对象的垂直方向偏移量 设置为整数，单位为像素，若垂直往下，则为正数；若垂直往上移，则为负数
Positive 设置阴影的透明度，0:透明 1：不透明
5:Glow滤镜
用于设置对象产生边缘光晕的模糊效果。Glow滤镜的基本语法格式如下：
Style=”filter:Glow(color=#value,strength=value)”
Strength设置边缘光晕的强度大小，设置值1~255的整数。
6:Gray,Invert,Xray滤镜
Gray滤镜主要用于将对象中的颜色除去，以变成黑白的效果
Invert滤镜主要用于将颜色的饱和度及其亮度值完全反转，类似底片的效果
Xray滤镜主要用于让对象显示轮廓加亮，有点类似X光片的效果
三个滤镜的基本语法格式：
Style=”filter:gray”
Style=”filter:Invert”
Style=”filter:Xray”
这三个滤镜没有参数
FlipH和 FlopV滤镜
FlipH滤镜是设置对象产生水平翻转180，即左右相反的效果。
FlopV滤镜是设置对象产生垂直180,即上下颠倒的效果
<img width="123" height="125" src="93_8878_53bf9b690d4e838.jpg" style="filter:fliph;" />
7：Wave滤镜
主要用于设置对象产生垂直的波浪效果，Wave滤镜的基本语法格式如下：
Style=”filter:Wave(add=value,freg=value,lightstrength=value,phase=value,strength=value)”
Add 是否显示原来的对象，默认为0不显示
Freg 设置出现在对象上的波浪数目 以正数设置
Strength 设置波浪的振幅大小 单位为像素，数值为正整数
Lightstrength 设置波浪上光的照射强度 0(最弱) 100（最强）
Phase 设置正弦波的起始位置 0~100 相当于把360划分为100个等分
<img width="125" height="125" src="93_8878_53bf9b690d4e838.jpg" style="filter:Wave(add=1,freq=4,lightstrength=30,phase=40,strength=15)" />
8：Shadow 滤镜
除了具备DropShadow的阴影效果外，它还多了阴影渐变的特效。Shadow滤镜的基本语法格式如下：
Style=”filter:Shadow{color=#color,direction=value}”
Shadow滤镜的参数设置：
Color 指定对象中要变为透明的颜色，以#rrggbb格式设置或是指定颜色名称的方式
Direction 设置阴影的方向 总单位为360 0代表垂直向上，并以45为一个单位，其预设为255
9：Mask滤镜
主要用于设置对象的屏蔽效果，就如同印章一样印出模型的模样。Mask滤镜的基本语法格式：
Style=”filter:Mask(color=#color)”
Color 设置屏蔽的颜色 以#rrggbb的格式设置或指定颜色名称的方式
<img width="150" height="150" src="暴风截屏20090511212501.bmp" style="filter:Mask(color=#0000ff)" />
10：chroma滤镜
主要用于指定对象中的某个颜色，变为透明效果。Chroma滤镜的基本语法格式如下
Style=”filter:chroma(color=#color)”
11：转换滤镜
在IE中，提供了整合转换滤镜和提示转换滤镜两种转换滤镜。通过这两种滤镜的应用，可以在两个画面中，以特效方式轻松地完成图片或文字的转换
融合转换滤镜 Blend Transition Filter 用于执行淡入或淡出方式的转换
提示转换滤镜 Reveal Transition Filter 提供了24种转换方式，将以提示的方式进行转换
在使用转换滤镜时，一般需要script语言配合才能达到效果
如果用户不熟悉 script语言，可以利用HTML中的<meta>标签实现转换滤镜的效果。
语法：
<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种。
１：滤镜功能简介
滤镜(filter)是CSS技术的一种应用，它可以用来改变图形的外观，以增加图形的视觉效果。
滤镜分为视觉滤镜visual filters的转换滤镜 transition filters两大类
视频滤镜只可以达到静态的特效效果，只需在网页内使用CSS的定义语法，即可将此滤镜效果加到网页内。
转换滤镜是用于两个画面进行转换时所使用的特效，将产生动态效果，除了在网页中利用CSS的定义语法外，还必须配合script语言，及事件的概念，才能自如地使用转换滤镜，产生绚丽的效果
２：alpha滤镜
可产生颜色透明和渐变的效果
Style=”filter:Alpha(opacity=value,style=value)”
Opacity开始时的透明度，设置０完全透明~１００完全不透明，值越大透明度越低
Finishopacity 结束时的透明度，设置0~１００
Style 渐变的形状 0:均匀，１：直线，２：圆形 ３：矩形
startX 渐变开始时的X坐标，度量单位为图片宽度的百分比。
StartY Y坐标 高度
finishX 渐变结束时的X坐标，单位为图片宽度的百分比
finishY 渐变结束时的Y坐标，单位为图片高度的百分比。
<td><img src="暴风截屏20090511212501.bmp" /></td>
<td><img src="暴风截屏20090511212501.bmp" style="filter:Alpha(style=0,opacity=50)"/></td>
<td><img src="暴风截屏20090511212501.bmp" style="filter:Alpha(style=1)" /></td>
</tr>
<tr align="center"><td>圆形渐变</td><td></td><td>矩形渐变</td></tr>
<tr align="center">
<td><img src="暴风截屏20090511212501.bmp" style="filter:Alpha(style=2)" /></td>
<td></td>
<td><img src="暴风截屏20090511212501.bmp" style="filter:Alpha(style=3)" /></td>
3:blur滤镜
可以产生快速移动的动态模糊效果。Blur滤镜的基本语法格式如下：
Style:”filter:Blur{add=value,direction=value,strength=value”}
Add 是否要显示原来的对象 0(不显示)和1(显示)，默认值为1,即显示原来的对象
Direction 动态模糊效果的方向 总单位为360.0代表垂直向上，并以每45为一个单位，默认值为270。
Strength 动态模糊效果的大小，表示有多少像素的大小会被影响 以整数来设置，默认值为5px
<div style="width:262;height:85;filter:Blur(direction=45,strength=88)"> //不起作用
4:Dropshadow滤镜、
用于设置对象产生阴影效果。Dropshadow滤镜的基本语法格式如下：
Style=”filter:Dropshadow(color=#value,offx=value,offy=value,positive=value)”
Color设置阴影的颜色，
Offx阴影相对原始对象的水平方向偏移量 设置为整数，单位为像素，若水平往右移，则为正数，若水平往左移，则为负数
Offy 阴影相对原始对象的垂直方向偏移量 设置为整数，单位为像素，若垂直往下，则为正数；若垂直往上移，则为负数
Positive 设置阴影的透明度，0:透明 1：不透明
5:Glow滤镜
用于设置对象产生边缘光晕的模糊效果。Glow滤镜的基本语法格式如下：
Style=”filter:Glow(color=#value,strength=value)”
Strength设置边缘光晕的强度大小，设置值1~255的整数。
6:Gray,Invert,Xray滤镜
Gray滤镜主要用于将对象中的颜色除去，以变成黑白的效果
Invert滤镜主要用于将颜色的饱和度及其亮度值完全反转，类似底片的效果
Xray滤镜主要用于让对象显示轮廓加亮，有点类似X光片的效果
三个滤镜的基本语法格式：
Style=”filter:gray”
Style=”filter:Invert”
Style=”filter:Xray”
这三个滤镜没有参数
FlipH和 FlopV滤镜
FlipH滤镜是设置对象产生水平翻转180，即左右相反的效果。
FlopV滤镜是设置对象产生垂直180,即上下颠倒的效果
<img width="123" height="125" src="93_8878_53bf9b690d4e838.jpg" style="filter:fliph;" />
7：Wave滤镜
主要用于设置对象产生垂直的波浪效果，Wave滤镜的基本语法格式如下：
Style=”filter:Wave(add=value,freg=value,lightstrength=value,phase=value,strength=value)”
Add 是否显示原来的对象，默认为0不显示
Freg 设置出现在对象上的波浪数目 以正数设置
Strength 设置波浪的振幅大小 单位为像素，数值为正整数
Lightstrength 设置波浪上光的照射强度 0(最弱) 100（最强）
Phase 设置正弦波的起始位置 0~100 相当于把360划分为100个等分
<img width="125" height="125" src="93_8878_53bf9b690d4e838.jpg" style="filter:Wave(add=1,freq=4,lightstrength=30,phase=40,strength=15)" />
8：Shadow 滤镜
除了具备DropShadow的阴影效果外，它还多了阴影渐变的特效。Shadow滤镜的基本语法格式如下：
Style=”filter:Shadow{color=#color,direction=value}”
Shadow滤镜的参数设置：
Color 指定对象中要变为透明的颜色，以#rrggbb格式设置或是指定颜色名称的方式
Direction 设置阴影的方向 总单位为360 0代表垂直向上，并以45为一个单位，其预设为255
9：Mask滤镜
主要用于设置对象的屏蔽效果，就如同印章一样印出模型的模样。Mask滤镜的基本语法格式：
Style=”filter:Mask(color=#color)”
Color 设置屏蔽的颜色 以#rrggbb的格式设置或指定颜色名称的方式
<img width="150" height="150" src="暴风截屏20090511212501.bmp" style="filter:Mask(color=#0000ff)" />
10：chroma滤镜
主要用于指定对象中的某个颜色，变为透明效果。Chroma滤镜的基本语法格式如下
Style=”filter:chroma(color=#color)”
11：转换滤镜
在IE中，提供了整合转换滤镜和提示转换滤镜两种转换滤镜。通过这两种滤镜的应用，可以在两个画面中，以特效方式轻松地完成图片或文字的转换
融合转换滤镜 Blend Transition Filter 用于执行淡入或淡出方式的转换
提示转换滤镜 Reveal Transition Filter 提供了24种转换方式，将以提示的方式进行转换
在使用转换滤镜时，一般需要script语言配合才能达到效果
如果用户不熟悉 script语言，可以利用HTML中的<meta>标签实现转换滤镜的效果。
语法：
<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种。
