了解攝影活著美圖秀秀之類美圖軟件的同學對濾鏡肯定不陌生，CSS3對各種濾鏡效果有了支持，可以做出很多好玩兒效果，走馬觀花了解一下

語法

filter: function(param);

很很多CSS3屬性一樣，監獄支持情況需要使用浏覽器前綴，CSS濾鏡支持的方法有

1. grayscale 灰度
2. sepia 褐色
3. saturate 飽和度
4. hue-rotate 色相旋轉
5. invert 反色
6. opacity 透明度
7. brightness 亮度
8. contrast 對比度
9. blur 模糊
10. drop-shadow 陰影

效果

拿圖片做例子，看看效果

原圖

-webkit-filter:none;

以下效果都不是截圖，Chrome上看

模糊

-webkit-filter:blur(10px);

灰度

-webkit-filter:grayscale(0.5);

褐色

-webkit-filter:sepia(0.5);

亮度

-webkit-filter:brightness(3);

色相

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

反色

-webkit-filter:invert(1);

透明

-webkit-filter:opacity(0.5);

飽和度

-webkit-filter:saturate(5);

對比度

-webkit-filter:contrast(0.5);

陰影

-webkit-filter:drop-shadow(10px 10px 5px rgba(0,0,0,0.9));