您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 filter属性

2018-8-17 01:16| 作者: admin| 查看: 1539| 评论: 0|来自: 蚂蚁部落

filter属性用来定义滤镜效果,它可以改变元素的透明度、对比度、亮度和模糊度等。

很多应用中比较炫酷的效果,都可以借助此属性实现。

分享一个利用filter属性实现的图片模糊效果,具体参阅CSS鼠标悬浮图片模糊切换效果一章节。

浏览器兼容:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

考虑到当前浏览器兼容性问题,此属性前面建议添加浏览器厂商前缀:

[CSS] 纯文本查看 复制代码
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

语法结构:

[CSS] 纯文本查看 复制代码
filter:filter(value) filter(value) filter(value);

如果一次设置多个属性,使用空格分隔。

参数解析:

(1).filter:这里的filter是语法结构中的第二个(filter:filter(value)):

它可能的值有如下:

   Alpha:设置透明层次。

   blur:创建高斯模糊效果。

   Chroma:制作专用颜色透明。

   DropShadow:创建对象的固定影子。

   FlipH:创建水平镜像图片。

   FlipV:创建垂直镜像图片。

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

   gray:把图片灰度化。

   invert:反色。

   light:创建光源在对象上。

   mask:创建透明掩膜在对象上。

   shadow:创建偏移固定影子。

   wave:波纹效果。

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

(2).value:对应的filter的参数值。

一.Alpha:

语法结构:

[CSS] 纯文本查看 复制代码
filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)

参数解析:

(1).Opacity:起始值,取值为0~100, 0为透明,100为原图。

(2).FinishOpacity:目标值。

(3).Style:1或2或3。

(4).StartX:任意值。

(5).StartY:任意值。

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

二.blur:

语法结构:

[CSS] 纯文本查看 复制代码
filter:Blur(Add=add,Direction=direction,Strength=strength)

参数解析:

(1).Add:一般为1,或0。

(2).Direction:角度,0~315度,步长为45度。

(3).Strength:效果增长的数值,一般5即可。

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:Blur(Add="1",Direction="45",Strength="5")

三.Chroma:

语法结构:

[CSS] 纯文本查看 复制代码
filter:Chroma(Color=color)

参数解析:

(1).color:颜色值,#rrggbb格式。

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:Chroma(Color="#FFFFFF")

四.DropShadow:

语法结构:

[CSS] 纯文本查看 复制代码
filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive);

参数解析:

(1).Color:#rrggbb格式,任意。

(2).Offx:X轴偏离值。

(3).Offy:Y轴偏离值。

(4).Positive:1或0。

五.FlipH:

语法结构:

[CSS] 纯文本查看 复制代码
filter:FlipH

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:FlipH

六.FlipV:

语法结构:

[CSS] 纯文本查看 复制代码
filter:FlipV

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:FlipV

七.glow:

语法结构:

[CSS] 纯文本查看 复制代码
filter:Glow(Color=color,Strength=strength)

参数解析:

(1).Color:发光颜色。

(2).Strength:强度(0-100)

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:Glow(Color="#6699CC",Strength="5")

八.gray:

语法结构:

[CSS] 纯文本查看 复制代码
filter:Gray

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:Gray

九.invert:

[CSS] 纯文本查看 复制代码
filter:Invert

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:Invert

十.mask:

语法结构:

[CSS] 纯文本查看 复制代码
filter:Mask(Color=color)

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:Mask(Color="#FFFFE0")

十一.shadow:

语法结构:

[CSS] 纯文本查看 复制代码
filter:Shadow(Color=color,Direction=direction)

参数解析:

(1).Color:#rrggbb格式。

(2).Direction:角度,0-315度,步长为45度。

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:Shadow(Color="#6699CC",Direction="135")

十二.wave:

语法结构:

[CSS] 纯文本查看 复制代码
filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)

参数解析:

(1).Add:一般为1,或0。

(2).Freq:变形值。

(3).LightStrength:变形百分比。

(4).Phase:角度变形百分比。

(5).Strength:变形强度。

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")

十三.Xray:

语法结构:

[CSS] 纯文本查看 复制代码
filter:Xray

代码片段如下:

[CSS] 纯文本查看 复制代码
filter:Xray

鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 rotate()下一篇:CSS3 @supports

最新评论

返回顶部