清明已過,谷雨未來。

原圖

一行代碼變灰術(shù)：

灰質(zhì)圖片

? ? ?-webkit-filter:?grayscale(1)

就這么順利的完成了，就是給加了上面的樣式而已。這里用到的是css3的濾鏡，那我們順便看看濾鏡的其他用法吧！

-webkit-fiter是css3的一個屬性

支持它的瀏覽器

嗯，對，IE不支持。當然IE有它自己的實現(xiàn)濾鏡的方法，我們今天先不做研究。

灰度：

grayscale()： 值取0~1，上邊提到的就是這個。

對比度：

contrast(): 取值0~1：值為0時全黑，值為1時圖像不變

-webkit-filter:?contrast(26%)

亮度：

brightness()

取值為0時全黑，1時無變化，大于1開始增亮

-webkit-filter:?brightness(26%)

取值為0：

-webkit-filter:?brightness(0)

變成200試試：

webkit-filter:?brightness(200%)

飽和度：

saturate()

取值為0完全不飽和，取值為1無變化

完全不飽和

? ? ? ?-webkit-filter:?saturate(0);?

褐色：

Sepia() : 取值為0~1?,取0時圖像無變化，取1時變?yōu)槿稚?/p>

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

模糊

blur(px)

值越大越模糊

高斯模糊

耶？我眼鏡兒呢？這個海綿寶寶我看不清楚了，真是高斯模糊.

? ? ? ?-webkit-filter:?blur(3px);?

透明度

opacity():取值0到1之間,值越小越透明，取值為0時全透明。

????-webkit-filter:?opacity(20%);

反色：

invert()

? ? ? -webkit-filter:?invert(100%);?

令人瑟瑟發(fā)抖的海綿寶寶，額，為什么海綿寶寶變成了藍色,難不成它在海里生活太久了?看下圖就明白了:

陰影效果:

drop-shadow(h-shadow v-shadow blur spread?color)

前兩個參數(shù)表示陰影偏移量,第一個是水平方向,正數(shù)向左,負數(shù)向右.第二個參數(shù)是豎直方向:正數(shù)向下,負數(shù)向上.第三個變量控制陰影邊框的模糊度,越大越模糊,為0的時候最尖銳.第四個參數(shù)就是陰影的顏色了.

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