點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

說到濾鏡，搞前端的應該都不陌生，因為不管是曾經還是現在，你都有可能用過或者在用Photoshop。所有濾鏡在這個軟體中都是按分類在菜單中。濾鏡，主要是用來實現圖像的各種特殊效果。

簡單來說，CSS濾鏡就是提供類似PS的圖形特效，像模糊，銳化或元素變色等功能。通常被用於調整圖片，背景和邊界的渲染。這篇我來看一下CSS濾鏡中那些常用的用法。

一、常用的

1、使用filter：blur(px) - 生成毛玻璃效果，值越大越模糊。

2、使用filter：drop-shadow() - 生成整體陰影效果，和box-shadow相似，但又不同。

3、使用filter：opacity(%) - 生成透明度，0%是完全不飽和，100%圖像無變化。

下面我舉個例子來看一下它們的用法：

CSS代碼：（如下id值是設定在img元素上）

當滑鼠移上去時，顯示出原圖的模樣，具體效果如下所示：

這樣就一目了然了。

二、必需知道的

除了上面說的三種之外，CSS濾鏡還有另外七種，雖然相對來說不是特別常用，但是真的特別有用，尤其是在做一個技巧性的效果的時候，需要組合這些用法，所以，也是我們必需要知道的。

下面通過一些取值來看一下單獨設置時的具體效果：

1、filter： contrast(200%) - 調整圖像的對比度。

2、filter： grayscale(1) - 將圖像轉換為灰度圖像。

3、filter： invert(.9) - 反轉輸入圖像。

4、filter：brightness（.5）- 給圖片應用一種線性乘法，使其看起來更亮或更暗。

5、filter：saturate（6）- 轉換圖像飽和度。

6、filter：sepia（1）- 將圖像轉換為深褐色。

7、filter：hue-rotate（45deg）- 給圖像應用色相旋轉。

當取上面這些值時，我們來看一下具體效果：

總結一下：

寫了10個濾鏡的用法，其實濾鏡的用處不僅限制在單獨去使用它們，更重要的是知道如何組合這些屬性去處理你想要的效果。關於一些技巧性的用法，下次來寫。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！