CSS 濾鏡 -webkit-filter 的介紹和使用

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

-webkit-filter 的用法

-webkit-filter 用法是標準的 CSS 寫法，如：

-webkit-filter 支持的效果有：

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

下面是這幾種濾鏡具體的效果和代碼，請在最新的 Safari 和 Chrome 瀏覽器上查看效果：

原圖

blur 模糊

-webkit-filter:blur(2px);

brightness 亮度

-webkit-filter:brightness(25%);

contrast 對比度

-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 色相旋轉

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

saturate 飽和度

-webkit-filter: saturate(1000%);

文章來源：http://fairyfish.net/m/webkit-filter/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈