今天在辦公室親眼目睹了同事使用CSS3濾鏡為一張漂亮的照片輪廓加上了陰影，瞬間亮瞎了我的的雙眼，見笑了。?
所以也迅速嘗試使用CSS3濾鏡讓最新出爐的MUI LOGO也性感一把，試圖來愉悅一下大家的雙眼。

已經等不及了，趕緊奉上今天的測試結果。

CSS3濾鏡包括了以下幾種：

只取其一，同時存在時，后邊覆蓋前邊。

原圖


第一種：圖片灰度
-webkit-filter:grayscale(1);/*值為從0 – 1*/



第二種：褐色
-webkit-filter:sepia(1);/*值為從0 – 1*/


第三種：飽和度
-webkit-filter:saturate(3);/*值為從0 – +無窮*/


第四種：色相旋轉
-webkit-filter:hue-rotate(-45deg);/*值為從-無窮 – +無窮*/


第五種：invert反色
-webkit-filter:invert(1);/*值為從0 – 1*/


第六種：opacity透明度
-webkit-filter:opacity(0.8);/*值為從0 – 1*/


第七種：brightness亮度
-webkit-filter:brightness(10);/*值為從0 – +無窮*/


第八種：contrast對比度
-webkit-filter:contrast(5);/*值為從0 – +無窮*/


第九種：blur模糊
-webkit-filter:blur(3px);/*值為從0 – +無窮*/


第十種：drop-shadow陰影
-webkit-filter:drop-shadow(5px 5px 5px #000000);/*隨意配*/


據了解，目前這些屬性只支持webkit nightly版本和Chrome 18.0.976以上以上版本。
Caniuse的兼容統計表：
http://caniuse.com/#search=-webkit-filter



看到了這么多針對圖片或者是針對標簽層實現的濾鏡效果，是不是有點小興奮了呢？快快嘗試一下吧。

如果想讓圖片的輪廓有陰影，那就對img使用webkit-filter。

最后，附上大家最為熟悉的IE濾鏡參考資料作為對照，一起學習對比。
http://justcoding.iteye.com/blog/940184/ ?

筆記作者：css3China

筆記鏈接：http://www.w3cfuns.com/blog-5443448-5400256.html

原創聲明：此筆記被?css3China?標注為原創筆記，未經作者同意轉載必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利。

轉載于:https://www.cnblogs.com/goodbeypeterpan/p/3972873.html

總結

以上是生活随笔為你收集整理的CSS3滤镜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。