css3之filter特效

1、grayscale

用法：

    -moz-filter: grayscale(100%) ;
    -webkit-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;

效果：灰度即只有黑色和白色

2、sepia(1)

用法：

    -moz-filter: sepia(1);
    -webkit-filter: sepia(1);
    -ms-filter:sepia(1);
    -o-filter: sepia(1);
    filter:sepia(1);

效果：像老照片一样

3、saturate(0.5)

用法：

    -moz-filter: saturate(0.5) ;
    -webkit-filter: saturate(0.5);
    -ms-filter: saturate(0.5);
    -o-filter: saturate(0.5);
    filter:saturate(0.5);

效果：用来改变图片的饱和度（指的其实是色彩的纯度，纯度越高，表现越鲜明，纯度较低，表现则较黯淡）

4、hue-rotate

用法：

    -moz-filter: hue-rotate(90deg) ;
    -webkit-filter:hue-rotate(90deg);
    -ms-filter: hue-rotate(90deg);
    -o-filter:hue-rotate(90deg);
    filter: hue-rotate(90deg);

效果：hue-rotate用来改变图片的色相

5、invert

用法：

    -moz-filter: invert(1);
    -webkit-filter:invert(1);
    -ms-filter:invert(1);
    -o-filter:invert(1);
    filter:invert(1);

效果：invert像照相机底面一样

6、opacity

用法：

    -moz-filter:opacity(.2);
    -webkit-filter:opacity(.2);
    -ms-filter: opacity(.2);
    -o-filter:opacity(.2);
    filter: opacity(.2);

效果：opacity改变图片的透明度

7、brightness

用法：

    -moz-filter:brightness(.5);
    -webkit-filter:brightness(.5);
    -ms-filter:brightness(.5);
    -o-filter: brightness(.5);
    filter: brightness(.5);

效果：改变图片的亮度

8、contrast

用法：

    -moz-filter: contrast(2);
    -webkit-filter:contrast(2);
    -ms-filter: contrast(2);
    -o-filter: contrast(2);
    filter:contrast(2);
    filter: gray;

效果：contrast改变图片的对比度

9、blur

用法：

    -moz-filter: blur(3px);
    -webkit-filter: blur(3px);
    -ms-filter:blur(3px);
    -o-filter:blur(3px);
    filter:blur(3px);

效果：blur模糊图片

10、drop-shadow

用法：

    -moz-filter: drop-shadow(5px 5px 5px #ccc) ;
    -webkit-filter:drop-shadow(5px 5px 5px #ccc);
    -ms-filter: drop-shadow(5px 5px 5px #ccc);
    -o-filter: drop-shadow(5px 5px 5px #ccc);
    filter:drop-shadow(5px 5px 5px #ccc);

效果：drop-shadow给图片加阴影效果