网站开发中CSS3的滤镜

在网站开发中,CSS3滤镜(CSS3 Filters)是CSS3新增的一个魔法属性,可以对网页元素添加神奇图像处理效果,类似于Photoshop里面的滤镜。

滤镜可以实现图像、背景、边框的模糊、颜色调整,语法与IE的filter截然不同。

1. .filter-element{filter: none | <filter-function-list> }

<filter-function-list> = [ <filter-function> | <url> ]+

<filter-function> =<blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

设置元素的滤镜效果

filter-function解释
blur()=blur( <length> )模糊,默认值为0
brightness()=brightness( [<number> | <percentage>])亮度,默认值为100%
contrast()=contrast( [<number> | <percentage>])对比度,默认值为100%
saturate()=saturate( [<number> | <percentage>])饱和度,默认值为100%
grayscale()=grayscale( [<number> | <percentage>])灰度,默认值为100%
hue-rotate()=hue-rotate( <angle> )色相旋转,默认值为0deg
invert()=invert( [<number> | <percentage>])反色,默认值为0
sepia()=sepia( [<number> | <percentage>])褐色,默认值为0
opacity()=opacity( [<number> | <percentage>])透明度,默认值为100%
drop-shadow() = drop-shadow( <length>{2,3} <color>? )阴影,默认数字为0,默认颜色为color属性颜色


注意:CSS3滤镜兼容性在Chrome和Firefox还不错,其它比较差。可以用Polyfill解决。

浏览:294 | 点赞:133 | 评论:0
全部评论
暂无评论

快速评论