网页中的CSS滤镜使用详解

语法: STYLE="filter:filtername(fparameter1, fparameter2...)"

• Filtername 滤镜的名称


• fparameter1, fparameter2... 滤镜的参数

滤镜说明

• alpha 设置透明层次


• blur 创建高速度移动效果, 即模糊效果


• chroma 制作专用颜色透明


• DropShadow 创建对象的固定影子


• FlipH 创建水平镜像图片


• FlipV 创建垂直镜像图片


• glow 加光辉在附近对象的边外


• gray 把图片灰度化


• invert 反色


• light 创建光源在对象上


• mask 创建透明掩膜在对象上


• shadow 创建偏移固定影子


• wave 波纹效果


• Xray 使对象变得像被x光照射一样

滤镜 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 任意值

[css]
filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
[/css]

滤镜 blur

STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
说明:

• Add 一般为1, 或0.


• Direction 角度, 0～315度, 步长为45度.


• Strength 效果增长的数值, 一般5即可.

[css]
filter:Blur(Add="1",Direction="45",Strength="5")
[/css]

滤镜 Chroma

STYLE="filter:Chroma(Color = color)"
说明:

• color #rrggbb格式, 任意.

[css]
filter:Chroma(Color="#FFFFFF")
[/css]

滤镜 DropShadow

STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
说明:

• Color #rrggbb格式, 任意.


• Offx X轴偏离值.


• Offy Y轴偏离值.


• Positive 1或0.

[css]
filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
[/css]

滤镜 FlipH

STYLE="filter:FlipH"
[css]
filter:FlipH
[/css]

滤镜 FlipV

STYLE="filter:FlipV"
[css]
filter:FlipV
[/css]

滤镜 glow

STYLE="filter:Glow(Color=color, Strength=strength)"
说明:

• Color 发光颜色.


• Strength 强度(0－100)

[css]
filter:Glow(Color="#6699CC",Strength="5")
[/css]

滤镜 gray

STYLE="filter:Gray"
[css]
filter:Gray
[/css]

滤镜 invert

STYLE="filter:Invert"
[css]
filter:Invert
[/css]

滤镜 mask

STYLE="filter:Mask(Color=color)"
[css]
filter:Mask (Color="#FFFFE0")
[/css]

滤镜 shadow

filter:Shadow(Color=color, Direction=direction)
说明:

• Color #rrggbb格式.


• Direction 角度, 0－315度, 步长为45度.

[css]
filter:Shadow (Color="#6699CC", Direction="135")
[/css]

滤镜 wave

filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)
说明:

• Add 一般为1, 或0.


• Freq 变形值.


• LightStrength 变形百分比.


• Phase 角度变形百分比.


• Strength 变形强度.

[css]
filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
[/css]

滤镜 Xray

STYLE="filter:Xray"
[css]
filter:Xray
[/css]