本文主要介紹 CSS 濾鏡的不常用用法，希望能給讀者帶來一些干貨！

系列 CSS 文章匯總在我的 Github ，持續更新，歡迎點個 star 訂閱收藏。

OK，下面直接進入正文。本文所描述的濾鏡，指的是 CSS3 出來后的濾鏡，不是 IE 系列時代的濾鏡，語法如下，還未接觸過這個屬性的可以先簡單到MDN -- filter 了解下：

{

filter: blur(5px);

filter: brightness(0.4);

filter: contrast(200%);

filter: drop-shadow(16px 16px 20px blue);

filter: grayscale(50%);

filter: hue-rotate(90deg);

filter: invert(75%);

filter: opacity(25%);

filter: saturate(30%);

filter: sepia(60%);

/* Apply multiple filters */

filter: contrast(175%) brightness(3%);

/* Global values */

filter: inherit;

filter: initial;

filter: unset;

}

基本用法

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

CodePen Demo -- Css3 filter

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

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

常用用法

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

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

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

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

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

contrast/brightness -- hover 增亮圖片

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

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

當然，這個方法同樣適用于按鈕，簡單的 CSS 代碼如下：

.btn:hover,

.img:hover {

transition: filter .3s;

filter: brightness(1.1) contrast(110%);

}

blur -- 生成圖像陰影

通常而言，我們生成陰影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它們生成陰影是陰影只能是單色的。

有讀者同學會問了，你這么說，難道還可以生成漸變色的陰影不成？

額，當然不行。

這個真不行，但是通過巧妙的利用 filter: blur 模糊濾鏡，我們可以假裝生成漸變色或者說是顏色豐富的陰影效果。

假設我們有下述這樣一張頭像圖片：

下面就利用濾鏡，給它添加一層與原圖顏色相仿的陰影效果，核心 CSS 代碼如下：

.avator {

position: relative;

background: url($img) no-repeat center center;

background-size: 100% 100%;

&::after {

content: "";

position: absolute;

top: 10%;

width: 100%;

height: 100%;

background: inherit;

background-size: 100% 100%;

filter: blur(10px) brightness(80%) opacity(.8);

z-index: -1;

}

}

看看效果：

其簡單的原理就是，利用偽元素，生成一個與原圖一樣大小的新圖疊加在原圖之下，然后利用濾鏡模糊 filter: blur() 配合其他的亮度/對比度，透明度等濾鏡，制作出一個虛幻的影子，偽裝成原圖的陰影效果。

嗯，最重要的就是這一句 filter: blur(10px) brightness(80%) opacity(.8); 。

blur 混合 contrast 產生融合效果

接下來介紹的這個，是本文的重點，模糊濾鏡疊加對比度濾鏡產生的融合效果。讓你知道什么是 CSS 黑科技！

單獨將兩個濾鏡拿出來，它們的作用分別是：

filter: blur()： 給圖像設置高斯模糊效果。

filter: contrast()： 調整圖像的對比度。

但是，當他們“合體”的時候，產生了奇妙的融合現象，通過對比度濾鏡把高斯模糊的模糊邊緣給干掉，利用高斯模糊實現融合效果。

先來看一個簡單的例子：

![圖片描述][2]

仔細看兩圓相交的過程，在邊與邊接觸的時候，會產生一種邊界融合的效果。

上述效果的實現基于兩點：

圖形是在被設置了 filter: contrast() 的畫布背景上進行動畫的

進行動畫的圖形被設置了 filter: blur()( 進行動畫的圖形的父元素需要是被設置了 filter: contrast() 的畫布)

......

閱讀全文

總結

以上是生活随笔為你收集整理的被低估的css滤镜,你所不知道的 CSS 滤镜技巧与细节的全部內容，希望文章能夠幫你解決所遇到的問題。

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