CSS 如何實(shí)現(xiàn)羽化效果？
最近碰到這樣一個問題，在一張封面上直接顯示書名，可能會存在書名看不太清楚的情況（容易受到背景干擾），如下
為了解決這個問題，設(shè)計師提了一個“究極”方案，將書名背后的圖片模糊一下，這個在 CSS 中很好實(shí)現(xiàn)，僅需backdrop-filter即可
當(dāng)然，現(xiàn)在模糊是模糊了，但是邊緣過于“斷層”，導(dǎo)致書名和封面有些“格格不入”，效果如下
如果能夠?qū)⑦吘売鸹幌?，虛化邊緣效果，就可以很好地將書名融入到背景?dāng)中。
羽化是photoshop術(shù)語，羽化原理是令選區(qū)內(nèi)外銜接部分虛化，起到漸變的作用從而達(dá)到自然銜接的效果，是ps及其其它版本中的處理圖片的重要工具。
這是設(shè)計最終羽化后的效果，既能保證文字清晰可見，又能避免太過突兀，如下：
設(shè)計師實(shí)現(xiàn)這個很簡單，用橡皮擦擦一下就可以了，那么 CSS 呢？下面來探討一下 CSS 如何實(shí)現(xiàn)羽化的效果。
一、羽化的原理
羽化其實(shí)就是將邊緣變得模糊，在 CSS 中其實(shí)就是創(chuàng)建一個邊緣模糊的遮罩（mask），也就是需要一種半透明的漸變。
關(guān)于遮罩，這里簡單介紹一下，基本語法很簡單，和background的語法基本一致
這里的遮罩圖片和背景的使用方式基本一致，可以是PNG圖片、SVG圖片、也可以是漸變繪制的圖片，同時也支持多圖片疊加。
遮罩的原理很簡單，最終效果只顯示不透明的部分，透明部分將不可見，半透明類推
先舉個圓形的例子，這個比較簡單，因為可以直接通過徑向漸變創(chuàng)建
比如，下面有一個頭像，現(xiàn)在直接放在背景上非常突兀
我們可以將這個頭像通過徑向漸變繪制出了一個從不透明到透明的遮罩，達(dá)到和背景融合的效果
原理是這樣的：
最后效果如下：
當(dāng)然這是圓形的，如果是矩形的呢？
二、矩形的羽化原理
根據(jù)上面的分析，如果希望羽化矩形邊緣，需要創(chuàng)建這一個遮罩
那么問題來了，如何創(chuàng)建這一個邊緣模糊的矩形呢？貌似沒辦法直接通過漸變來實(shí)現(xiàn)，而且還需要是尺寸自適應(yīng)的（自動跟隨容器尺寸）
如果單純看這樣一個矩形，還是很容易實(shí)現(xiàn)的，通過box-shadow即可實(shí)現(xiàn)
根據(jù)需求，**可以多疊加幾層box-shadow**，這里疊加了3層，效果如下
但是問題又來了，這樣一個 dom 無法直接用作mask-image，那如何處理呢？
三、通過 SVG foreignObject 轉(zhuǎn)換成圖片
上面提到，通過 CSS 陰影可以很輕松的實(shí)現(xiàn)我們說需要的效果，但可惜現(xiàn)在還是 dom 階段，所以需要將這個 dom 轉(zhuǎn)換成圖像。
在這里，需要借助 SVG? 中的foreignObject[1]元素，通過這個元素，可以將 HTML?嵌入到SVG?中，輕松實(shí)現(xiàn) dom 轉(zhuǎn)圖片的效果。
原理如下：
回到這里，我們僅需要將上面的結(jié)果放到foreignObject?元素中，由于需要自適應(yīng)尺寸，這里的body?寬高都是100%，如下
這樣就得到了一個寬高自適應(yīng)的SVG圖像，無論寬高怎么變化，都是撐滿的。
別看這么多標(biāo)簽，這其實(shí)已經(jīng)是一張圖片，可以直接使用，接下來看看如何運(yùn)用
四、矩形的羽化
其實(shí)上面得到的 SVG可以直接當(dāng)成一個圖片資源，正常使用了，就像這樣
不過，也可以將這個SVG圖片轉(zhuǎn)換成內(nèi)聯(lián)形式，減少資源依賴，轉(zhuǎn)換后仍然保持自適應(yīng)特性。
這里推薦張鑫旭老師的SVG在線壓縮合并工具 [2]。
轉(zhuǎn)換后就是這個樣子：
效果如下
而且由于尺寸是動態(tài)的，換個書名也能完美適應(yīng)。
最后再來對比一下，下面哪個一眼看上去效果最好？
完整代碼可以查看以下任意鏈接：
- CSS feather (juejin.cn)[3]
- CSS feather (codepen.io)[4]
- CSS feather (runjs.work)[5]
五、總結(jié)一下
以上就是本文全部內(nèi)容了，一個還不錯的繪制小技巧，最后來回顧一下一些實(shí)現(xiàn)要點(diǎn)。
- 羽化其實(shí)就是將邊緣變得模糊，在 CSS 中其實(shí)就是創(chuàng)建一個邊緣模糊的遮罩，也就是需要一種半透明的漸變。
- 圓形的邊緣很好羽化，因為徑向漸變可以直接繪制。
- 矩形的邊緣就稍微復(fù)雜點(diǎn)，因為不能直接通過漸變繪制。
- 邊緣模糊在 CSS 中很好實(shí)現(xiàn)，用 box-shadow 就行了。
- 可以通過 SVG foreignObject 將 dom 轉(zhuǎn)換成圖片。
- SVG 轉(zhuǎn)換成內(nèi)聯(lián)形式，好處是減少資源依賴，轉(zhuǎn)換后仍然保持自適應(yīng)特性。
