1、CSS 的过滤器属性CSS 过滤器包括 Alpha, BlendTrans, Blur, Chroma, DropShadow, FlipH, FlipV, Glow, Gray, Invert, Light, Mask, RevealTrans, Shadow, Wave, Xray 等。1、静态 CSSstyle=“filter: Alpha( )“Alpha：设置透明度Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)Opacity：透明度级别，范围是 0-100，0 代
2、表完全透明， 100 代表完全不透明。FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是 0 到 100。Style：设置渐变透明的样式，值为 0 代表统一形状、1 代表线形、2 代表放射状、3 代表长方形。StartX 和 StartY：代表渐变透明效果的开始 X 和 Y 坐标。FinishX 和 FinishY：代表渐变透明效果结束 X 和 Y 的坐标。BlendTransBlur 风吹模糊效果语法：STYLE=“filter:Blur(Add = add, Direction = direction, Strength = strength)“说明：Add
3、：一般为 1，或 0。当为 1 时表示使用模糊效果。Direction：动态模糊效果的角度方向，0315 度，步长为 45 度。0 代表垂直向上，按顺时针方向，每 45 度一个单位，默认值是向左 270 度。Strength：效果增长的数值，一般 5 即可。设置模糊宽度。例子：filter:Blur(Add=“1“,Direction=“45“,Strength=“5“)Chroma 特定颜色的透明效果语法：STYLE=“filter:Chroma(Color = color)“说明：color ：#rrggbb 格式，任意。例子：filter:Chroma(Color=“#FFFFFF“)D
4、ropShadow 阴影效果语法：STYLE=“filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)“说明：Color:#rrggbb 格式，任意。Offx：X 轴偏离值。Offy：Y 轴偏离值。Positive：1 或 0。例子：filter:DropShadow(Color=“#6699CC“,OffX=“5“,OffY=“5“,Positive=“1“)FlipH 水平翻转FlipV 垂直翻转Glow 边缘光晕语法：STYLE=“filter:Glow(Color=color, Strength=s
5、trength)“说明：Color：发光颜色。Strength：强度(0100)例子：filter:Glow(Color=“#6699CC“,Strength=“5“)Gray 黑白Invert 底片LightMask 遮蔽滤镜：mask语法：STYLE=“filter:Mask(Color=color)“例子：filter:Mask (Color=“#FFFFE0“)RevealTransShadow 设置强度变化的阴影滤镜：shadow语法：filter:Shadow(Color=color, Direction=direction)说明：Color：#rrggbb 格式。Directio
6、n：角度，0 315 度，步长为 45 度。例子：filter:Shadow (Color=“#6699CC“, Direction=“135“)Wave 波浪变形滤镜：wave语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength ，Phase=phase ，Strength=strength)说明：Add：一般为 1，或 0。Freq：变形值。LightStrength：变形百分比。Phase：角度变形百分比。Strength：变形强度。例子：filter: wave(Add=“0“, Phase=“4“, Freq=“5“, Li
7、ghtStrength=“5“, Strength=“2“)Xray 加入轮廓效果滤镜：Xray语法：STYLE=“filter:Xray“例子：filter:Xray2、动态 CSS 的过滤器属性动态滤镜包括两种：1.blend, 2.reveal。动态 CSS 滤镜不能在 HTML 中调运，要结合在 script 中由 script 加以控制。blend 基本语法：style=“filter:blendTrans(duration= 过滤时间)“实现图像的淡出和淡入，时间单位为秒reveal 基本语法：style=“filter:revealTrans(Duration=过渡时间,Tran
8、sition=过渡的类型)“Transition 的取值范围是 0-23imgx.filters.blendTrans.Apply();imgx.src=“;imgx.filters.blendTrans.Play();Apply 将过滤器应用到对象上 Play 开始转换1、语法： filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)2、属性： enabled:可选项。 true | false true: 默认值。滤镜激活。fals
9、e:滤镜被禁止startColorStr:可选项。字符串 (String)。设置或检索色彩渐变的开始颜色和透明度。 其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。AA 指定透明度, 00 是完全透明。 FF 是完全不透明。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。超出取值范围的值将被恢复为默认值。取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结
10、束颜色和透明度。 参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。3、 特性： Enabled:可读写。布尔值 (Boolean)。参阅 enabled 属性。GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 01:默认值。水平渐变。0:垂直渐变。StartColorStr:可读写。字符串(String)。参阅 startColorStr 属性。StartColor:可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为
11、不透明白色。EndColorStr:可读写。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。EndColor:可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时，也可以用十六进制格式： 0xAARRGGBB 。4、说明： 在对象的背景和内容之间显示定制的色彩层。当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定
12、义的值更新。5、示例： #idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false,startColorstr=#550000FF, endColorstr=#55FFFF00) ;CSS 滤镜 css 滤镜的标识符式“filter” ，总体的应用上和其他的 css 语句相同。css 滤镜可分为基本滤镜和高级滤镜两种。 css 滤镜分类可以直接作用于对象上，并且立即生效的滤镜称为基本滤镜。而要配合 JavaSc
13、ript 等脚本语言，能产生更多变幻效果的则称为高级滤镜。alpha（通道）alpha 滤镜用于设定透明度，它的表达式如下：filter：alpha（opacity=opcity，finishopacity=finishopacity，style=style，startX=startX，startY=startY， finishX=finishX）其中 opacity 表示透明度等级，可选值从 0100，0 代表完全透明，100 代表完全不透明。style 参数制定透明区域形状特征。startX ，startY 为坐标参数。blur（模糊）模糊滤镜给予对象朦胧神秘的效果，它的表达式如下：fil
14、ter：progid ：DXImagetransform.microsoft.blur （makeshadow=makeshadow，pixelradius=pixelradius，shadowopacity=shadowopacity）；其中 makeshadow 代表是否处理为阴影，pixelradius 表示模糊作用深度，shadowopacity 表示阴影的透明度。Chroma(透明色)chromat 滤镜给予图像一个特定的颜色透明，它的表达式如下：“filter:Chroma(Color=color)“说明：color：#rrggbb 格式，任意。例子：filter:Chroma(C
15、olor=“#FFFFFF“)DropShadow(投射阴影)语法：STYLE=“filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)“说明：Color:#rrggbb 格式，任意。Offx：X 轴偏离值。Offy：Y 轴偏离值。Positive：1 或 0。例子：filter:DropShadow(Color=“#6699CC“,OffX=“5“,OffY=“5“,Positive=“1“)FlipH （水平翻转）语法：STYLE=“filter:FlipH“例子：filter:FlipHFlipV（垂直翻转
16、）语法：STYLE=“filter:FlipV“例子：filter:FlipVglow （外边界光效）语法：STYLE=“filter:Glow(Color=color,Strength=strength)“说明：Color：发光颜色。Strength：强度(0100)例子：filter:Glow(Color=“#6699CC“,Strength=“5“)滤镜：gray语法：STYLE=“filter:Gray“例子：filter:Grayinvert （底片效果）语法：STYLE=“filter:Invert“例子：filter:Invertmask（透明膜效果）语法：STYLE=“filt
17、er:Mask(Color=color)“例子：filter:Mask(Color=“#FFFFE0“)shadow（阴影效果）语法：filter:Shadow(Color=color,Direction=direction)说明：Color：#rrggbb 格式。Direction：角度，0 315 度，步长为 45 度。例子：filter:Shadow(Color=“#6699CC“,Direction=“135“)wave（正弦波纹打乱图片效果）语法：filter:Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase ，Strength=strength)说明：Add：一般为 1，或 0。Freq：变形值。LightStrength ：变形百分比。Phase：角度变形百分比。Strength：变形强度。例子：filter:wave(Add=“0“,Phase=“4“,Freq=“5“,LightStrength=“5“,Strength=“2“)Xray （只显示轮廓）语法：STYLE=“filter:Xray“例子：filter:Xray
