這兩天有看到國外網站紛紛介紹-webkit-filter，開始很迷惑，丫是想要學IE嗎？今天看了下，和IE的濾鏡沒一毛關系啊，而且，效果很贊！

這些濾鏡效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，現在webkit率先支持了它。

現在規范中支持的效果有：

• grayscale 灰度
• sepia 褐色
• saturate 飽和度
• hue-rotate 色相旋轉
• invert 反色
• opacity 透明度
• brightness 亮度
• contrast 對比度
• blur 模糊
• drop-shadow 陰影

嗯，有些和CSS3重復了，不過，具體要怎么用還要看具體情況，至少我們可以用不同的方法實現同樣的效果——比如透明度。

用法是標準的CSS寫法：

-webkit-filter: blur(2px);

然后，Eric Bidelman寫了一個demo，可以很方便的查看各種效果。但是考慮到某網站因為不明原因在國內無法訪問，我將該demo頁面簡單的翻譯了下，放到這邊給大家預覽，請猛擊查看。

請注意，改濾鏡目前只有最新的webkit nightly版本和Chrome 18.0.976以上版本才支持，所以你需要下載一個最新的版本來體驗～～我用的是webkit nightly。

現在，讓我們看一下一些簡單的效果吧：

原圖

模糊

50%灰度

100%灰度

50%褐色

100%褐色

50%亮度

100%亮度

色相

反色

飽和度

對比度

嗯，我們在手機端的各種特效如lomo、日系等，也可以在頁面簡單實現一些了，配合css3內陰影、遮罩、漸變等，相信不必instagram等差多少。

ps:sepia的翻譯貌似有點兒問題，求專業指點。

原文：http://www.qianduan.net/what-is-webkit-filter.html

本文鏈接：http://www.ditdrb.tw/tech/web/2011/8718.asp　

出處：前端觀察
責任編輯：bluehearts

◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發表評論。