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%);

}

转化图像的透明程度

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