文档详情

CSS的过器属性.doc

发布:2017-06-13约2.16万字共7页下载文档
文本预览下载声明
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
显示全部
相似文档