-webkit-filter是css3的一個屬性，Webkit率先支持了這幾個功能，感覺效果很不錯。下面咱們就學習一下filter這個屬性吧。

其默認值是none，他不具備繼承性，其中filter-function一個具有以下值可選：

• grayscale 灰度 ? ? ? ? ? ? ? 值為0-1之間的小數?
• sepia 褐色　　　　　　 ? 值為0-1之間的小數
• saturate 飽和度　　　　 值為num
• hue-rotate 色相旋轉　　值為angle
• invert 反色　　　　　　 ?值為0-1之間的小數
• opacity 透明度　　　　　值為0-1之間的小數
• brightness 亮度　　　　?值為0-1之間的小數
• contrast 對比度　　　　?值為num
• blur 模糊　　　　　　 ? ? 值為length
• drop-shadow 陰影

用法是標準的CSS寫法，如：

-webkit-filter: blur(2px);

下面是它的幾個小效果，大家可以對比著看一下：

　　　　　　 ? ? 無效果 ??-webkit-filter:none;

?

　　　　　　　　模糊 ? -webkit-filter:blur(3px) ?

?

　　　　　　　　灰度 -webkit-filter:grayscale(0.5)?

?

　　　　　　　　亮度 ?-webkit-filter:brightness(0.5)

?

　　　　　　　　對比度 ??-webkit-filter:contrast(2.6)

?

　　　　　　　　飽和度 ??-webkit-filter:saturate(7.9）

?

　　　　　　色相旋轉　-webkit-filter:hue-rotate(260deg)　

?

　　　　　　　　反色 ??-webkit-filter:invert(0.9)

?

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

轉載于:https://www.cnblogs.com/weiyanan/p/5360632.html

總結

以上是生活随笔為你收集整理的css3 -webkit-filter的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。