CSS的过器属性.docVIP

CSS的过滤器属性 HYPERLINK /tag/css/ \t _blank CSS过滤器包括Alpha, BlendTrans, Blur, Chroma, DropShadow, FlipH, FlipV, Glow, Gray, Invert, Light, Mask, RevealTrans, Shadow, Wave, Xray等。 1、静态CSS style=filter: Alpha( …… ) Alpha：设置透明度Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。StartX和StartY：代表渐变透明效果的开始X和Y坐标。FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。 BlendTrans Blur风吹模糊效果语法：STYLE=filter:Blur(Add = add, Direction = direction, Strength = strength)说明：Add：一般为1，或0。当为1时表示使用模糊效果。Direction：动态模糊效果的角度方向，0～315度，步长为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) 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水平翻转FlipV垂直翻转 Glow边缘光晕语法：STYLE=filter:Glow(Color=color, Strength=strength)说明：Color：发光颜色。Strength：强度(0－100)例子：filter:Glow(Color=#6699CC,Strength=5) Gray黑白Invert底片 Light Mask遮蔽滤镜：mask语法：STYLE=filter:Mask(Color=color)例子：filter:Mask (Color=#FFFFE0) RevealTrans Shadow 设置强度变化的阴影滤镜：shadow语法：filter:Shadow(Color=color, Direction=direction)说明：Color：#rrggbb格式。Direction：角度，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, LightStrength=5, Strength=2) Xray加入轮廓效果滤镜：Xray语法：STYLE=filter:Xray例子：filter:Xray 2、动态CSS的过滤器属性 动态滤镜包括两种：1.blend, 2.reveal。动态CSS滤镜不能在HTML中调运，要结合 在script中由script加以控制。 blend基本语法：style=filter:blendTrans(duration