CSS3濾鏡

filter: function(param);

CSS濾鏡支持的方法（function）有

grayscale 灰度

sepia 褐色

saturate 飽和度

hue-rotate 色相旋轉(zhuǎn)

invert 反色

opacity 透明度

brightness 亮度

contrast 對比度

blur 模糊

drop-shadow 陰影

為了實(shí)現(xiàn)兼容性，當(dāng)然少不了前綴-webkit-

-webkit-filter : function (param)；

我們用一個(gè)清純美女作為原圖：

一、blur 模糊

-webkit-filter : blur(2px);
filter : blur(2px)

二、grayscale 灰度

-webkit-filter : grayscale(100%);
filter : grayscale(100%);

三、sepia 褐色

-webkit-filter : sepia(100%);
filter : sepia(100%);

四、saturate 飽和度

-webkit-filter : saturate(5);
filter : saturate(5)

五、hue-rotate  色相旋轉(zhuǎn)

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

六、invert 反色

-webkit-filter : invert(1);
filter : invert(1);

七、opacity 透明度

-webkit-filter :opacity(.5)
filter : opacity(.5)

八、brightness 亮度

-webkit-filter : brightness(3)
filter : brightness(3)

九、contrast  對比度

-webkit-filter : contrast(.5)
filter : contrast(.5)

十、drop-shadow  陰影

-webkit-filter : drop-shadow(10px 10px 5px #000);
filter : drop-shadow(10px 10px 5px #000);