CSS3 filter(滤镜) 属性强大之处!

CSS 语法

filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|huerotate()|invert()|

opacity()|saturate()|sepia()|url();

img{

         -webkit-filter:grayscale(100%);/* Chrome, Safari, Opera */

          filter:grayscale(100%);

}

修改所有图片的颜色为黑白 (100% 灰度)

img{

         -webkit-filter:blur(5px);/* Chrome, Safari, Opera */

         filter:blur(5px);

}


图片使用高斯模糊效果

img {

          -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */

          filter: brightness(200%);

}


使图片变亮

img{

          -webkit-filter:drop-shadow(8px 8px 10px red);/* Chrome, Safari, Opera */

          filter:drop-shadow(8px 8px 10px red);

}


给图像设置一个阴影效果

img{

          -webkit-filter:grayscale(50%);/* Chrome, Safari, Opera */

          将图像转换为灰度图像:filter:grayscale(50%);

}


将图像转换为灰度图像


img{

            -webkit-filter:opacity(30%);/* Chrome, Safari, Opera */

            filter:opacity(30%);

}


转化图像的透明程度

所有滤镜效果......

推荐阅读更多精彩内容