武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：-webkit-filter是神馬？

這兩天有看到國(guó)外網(wǎng)站紛紛介紹-webkit-filter，開(kāi)始很迷惑，丫是想要學(xué)IE嗎？今天看了下，和IE的濾鏡沒(méi)一毛關(guān)系啊，而且，效果很贊！

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

現(xiàn)在規(guī)范中支持的效果有：

嗯，有些和CSS3重復(fù)了，不過(guò)，具體要怎么用還要看具體情況，至少我們可以用不同的方法實(shí)現(xiàn)同樣的效果——比如透明度。

用法是標(biāo)準(zhǔn)的CSS寫(xiě)法：

-webkit-filter

然后，Eric Bidelman寫(xiě)了一個(gè)demo，可以很方便的查看各種效果。但是考慮到某網(wǎng)站因?yàn)椴幻髟蛟趪?guó)內(nèi)無(wú)法訪問(wèn)，我將該demo頁(yè)面簡(jiǎn)單的翻譯了下，放到這邊給大家預(yù)覽，請(qǐng)猛擊查看。

請(qǐng)注意，改濾鏡目前只有最新的webkit nightly版本和Chrome 18.0.976以上版本才支持，所以你需要下載一個(gè)最新的版本來(lái)體驗(yàn)～～我用的是webkit nightly。

現(xiàn)在，讓我們看一下一些簡(jiǎn)單的效果吧：

原圖

模糊

50%灰度

100%灰度

50%褐色

100%褐色

50%亮度

100%亮度

色相

反色

飽和度

對(duì)比度

嗯，我們?cè)谑謾C(jī)端的各種特效如lomo、日系等，也可以在頁(yè)面簡(jiǎn)單實(shí)現(xiàn)一些了，配合css3內(nèi)陰影、遮罩、漸變等，相信不必instagram等差多少。

ps:sepia的翻譯貌似有點(diǎn)兒?jiǎn)栴}，求專(zhuān)業(yè)指點(diǎn)。