CSS3 滤镜:webkit-filter 的用法

作者: 来源: 更新时间:2012-12-27 14:59:04 点击:

大家可能对 Instagram 这款 iPhone APP 上的滤镜效果很感兴趣,其实 CSS3 开始也有滤镜(不是 IE 的那种滤镜),这些滤镜效果最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后制定了 CSS Filter Effects 1.0 的规范,Webkit 率先支持了它。

-webkit-filter 的用法

-webkit-filter 用法是标准的 CSS 写法,如:

-webkit-filter: blur(2px);-webkit-filter 支持的效果有:blur 模糊brightness 亮度contrast 对比度drop-shadow 阴影grayscale 灰度opacity 透明度sepia 褐色invert 反色saturate 饱和度hue-rotate 色相旋转

下面是这几种滤镜具体的效果和代码,请在最新的 Safari 和 Chrome 浏览器上查看效果:

原图

blur 模糊

-webkit-filter:blur(2px);

brightness 亮度

-webkit-filter:brightness(25%);

contrast 对比度

-webkit-filter: contrast(50%);

drop-shadow 阴影

-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度

-webkit-filter: opacity(50%);

grayscale 灰度

-webkit-filter: grayscale(80%);

sepia 褐色

-webkit-filter: sepia(100%);

invert 反色

-webkit-filter: invert(100%);

hue-rotate 色相旋转

-webkit-filter:hue-rotate(180deg);

saturate 饱和度

-webkit-filter: saturate(1000%);

 

http://fairyfish.net/m/webkit-filter/