css3滤镜——原来这么性感诱人

今天在办公室亲眼目睹了同事使用CSS3滤镜为一张漂亮的照片轮廓加上了阴影，瞬间亮瞎了周围同事的双眼。 
所以回家尝试使用CSS3让MUI最新LOGO也性感一把，试图来刺激一下大家的双眼。

已经等不及了，赶紧奉上今天的测试结果。

CSS3滤镜包括了以下几种：

第一种：图片灰度
-webkit-filter:grayscale(1);/*值为从0 – 1*/

第二种：褐色
-webkit-filter:sepia(1);/*值为从0 – 1*/

第三种：饱和度
-webkit-filter:saturate(3);/*值为从0 – +无穷*/

第四种：色相旋转
-webkit-filter:hue-rotate(-45deg);/*值为从-无穷 – +无穷*/

第五种：invert反色
-webkit-filter:invert(1);/*值为从0 – 1*/

 

第六种：opacity透明度
-webkit-filter:opacity(0.8);/*值为从0 – 1*/

第七种：brightness亮度
-webkit-filter:brightness(10);/*值为从0 – +无穷*/

第八种：contrast对比度
-webkit-filter:contrast(5);/*值为从0 – +无穷*/

第九种：blur模糊
-webkit-filter:blur(3px);/*值为从0 – +无穷*/

第十种：drop-shadow阴影
-webkit-filter:drop-shadow(5px 5px 5px #000000);/*随意配*/

据了解，目前这些属性只支持webkit nightly版本和Chrome 18.0.976以上以上版本。
Caniuse的兼容统计表：
http://caniuse.com/#search=-webkit-filter

 

看到了这么多针对图片或者是针对标签层实现的滤镜效果，是不是有点小兴奋了呢？快快尝试一下吧。

如果想让图片的轮廓有阴影，那就对img使用webkit-filter。

最后，附上大家最为熟悉的IE滤镜参考资料作为对照，一起学习对比。
http://justcoding.iteye.com/blog/940184/

原文地址：http://www.css3china.com/?p=980