大家可能對(duì)Instagram 這款iPhone APP 上的濾鏡效果很感興趣，其實(shí) CSS3 開始也有濾鏡（不是 IE 的那種濾鏡），這些濾鏡效果最初是用于 SVG 的，W3C 將其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的規(guī)范，Webkit 率先支持了它。

下面是這幾種濾鏡具體的效果和代碼，請(qǐng)?jiān)谧钚碌?Safari 和 Chrome 瀏覽器上查看效果：

原圖

blur 模糊

-webkit-filter:blur(2px);

brightness 亮度

-webkit-filter:brightness(25%);

contrast 對(duì)比度

-webkit-filter: contrast(50%);

drop-shadow 陰影

-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度

-webkit-filter: opacity(50%);

grayscale 灰度

-webkit-filter: grayscale(80%);

sepia 褐色

-webkit-filter: sepia(100%);

invert 反色

-webkit-filter: invert(100%);

hue-rotate 色相旋轉(zhuǎn)

-webkit-filter:hue-rotate(180deg);

saturate 飽和度

-webkit-filter: saturate(1000%);