您好,欢迎来到榕意旅游网。
搜索
您的当前位置:首页CSS滤镜 详解

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\

2、滤镜:blur

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

Add:一般为1,或0。

Direction:角度,0~315度,步长为45度。 Strength:效果增长的数值,一般5即可。

例子:filter:Blur(Add=\"1\

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\

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\

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- nryq.cn 版权所有 赣ICP备2024042798号-6

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务