css滤镜详解

CSS 滤镜详解

语法： STYLE="filter:filtername(fparameter1, fparameter2...)"
　　（ Filtername 为滤镜的名称， fparameter1 、 fparameter2 等是滤镜的参数）

滤镜说明：

　 alpha ：设置透明层次
　　 blur ：创建高速度移动效果，即模糊效果
　　 chroma ：制作专用颜色透明
　　 DropShadow ：创建对象的固定影子
　　 FlipH ：创建水平镜像图片
　　 FlipV ：创建垂直镜像图片
　　 glow ：加光辉在附近对象的边外
　　 gray ：把图片灰度化
　　 invert ：反色
　　 light ：创建光源在对象上
　　 mask ：创建透明掩膜在对象上
　　 shadow ：创建偏移固定影子
　　 wave ：波纹效果
　　 Xray ：使对象变得像被 x 光照射一样

1 、滤镜： Alpha
　　语法： STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity ， Style=style, StartX=startX ， StartY=startY ， FinishX=finishX ， FinishY=finishY)"
　　说明：
　　 Opacity ：起始值，取值为 0 ～ 100, 0 为透明， 100 为原图。
　　 FinishOpacity ：目标值。
　　 Style ： 1 或 2 或 3
　　 StartX ：任意值
　　 StartY ：任意值
　　例子： filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2 、滤镜： blur
　　语法： STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
　　说明：
　　 Add ：一般为 1 ，或 0 。
　　 Direction ：角度， 0 ～ 315 度，步长为 45 度。
　　 Strength ：效果增长的数值，一般 5 即可。
　　例子： filter:Blur(Add="1",Direction="45",Strength="5")
3 、滤镜： Chroma
　　语法： STYLE="filter:Chroma(Color = color)"
　　说明： color ： #rrggbb 格式，任意。
　　例子： filter:Chroma(Color="#FFFFFF")
4 、滤镜： 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")
5 、滤镜： FlipH
　　语法： STYLE="filter:FlipH"
　　例子： filter:FlipH
6 、滤镜： FlipV
　　语法： STYLE="filter:FlipV"
　　例子： filter:FlipV
7 、滤镜： glow
　　语法： STYLE="filter:Glow(Color=color, Strength=strength)"
　　说明：
　　 Color ：发光颜色。
　　 Strength ：强度 (0 － 100)
　　例子： filter:Glow(Color="#6699CC",Strength="5")
8 、滤镜： gray
　　语法： STYLE="filter:Gray"
　　例子： filter:Gray
9 、滤镜： invert
　　语法： STYLE="filter:Invert"
　　例子： filter:Invert
10 、滤镜： mask
　　语法： STYLE="filter:Mask(Color=color)"
　　例子： filter:Mask (Color="#FFFFE0")
11 、滤镜： shadow
　　语法： filter:Shadow(Color=color, Direction=direction)
　　说明：
　　 Color ： #rrggbb 格式。
　　 Direction ：角度， 0 － 315 度，步长为 45 度。
　　例子： filter:Shadow (Color="#6699CC", Direction="135")
12 、滤镜： 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")
13 、滤镜： Xray
　　语法： STYLE="filter:Xray"
　　例子： filter:Xray

 

本文出自：[url]http://www.xmlasp.net/n1722c40.aspx[/url]