CSS3濾鏡

今天在辦公室親眼目擊了同事使用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 標註爲原創筆記，未經做者贊成轉載必須保留此段聲明，且在文章頁面明顯位置給出原文連接，不然保留追究法律責任的權利。