本文主要介紹 CSS 濾鏡的不常用用法

先簡單看看幾種濾鏡的效果：

你可以通過 hover 取消濾鏡，觀察該濾鏡的效果。

簡單來說，CSS 濾鏡就是提供類似 PS 的圖形特效，像模糊，銳化或元素變色等功能。通常被用于調(diào)整圖片，背景和邊界的渲染。本文就會圍繞這些濾鏡展開，看看具體能怎么使用或者玩出什么花活。

常用用法

既然是標(biāo)題是你所不知道的技巧與細(xì)節(jié)，那么比較常用的一些用法就不再贅述，通常我們見得比較多的 CSS 濾鏡用法有：

使用 filter: blur()生成毛玻璃效果

使用 filter: drop-shadow()生成整體陰影效果

使用 filter: opacity()生成透明度

如果對上面的技巧不是很了解，可以稍稍百度谷歌一下，下文將由淺及深，介紹一些不大常見的濾鏡的具體用法及一些小細(xì)節(jié)：

contrast/brightness — hover 增亮圖片

通常頁面上的按鈕，都會有 hover/active 的顏色變化，以增強(qiáng)與用戶的交互。但是一些圖片展示，則很少有 hover 的交互，運用filter: contrast()或者filter: brightness()可以在 hover 圖片的時候，調(diào)整圖片的對比圖或者亮度，達(dá)到聚焦用戶視野的目的。

brightness表示亮度，contrast 表示對比度。