CSS 和 SVG 實(shí)現(xiàn)彩色圖片陰影
在平時(shí)開(kāi)發(fā)中，有時(shí)候會(huì)碰到這樣的彩色陰影，效果如下：
是不是非常有質(zhì)感？下面分別介紹 CSS 和 SVG 兩種實(shí)現(xiàn)方式，一起看看吧！
一、實(shí)現(xiàn)原理
從設(shè)計(jì)上看，其實(shí)原理很簡(jiǎn)單，一張?jiān)瓐D和一張模糊的圖，疊加在一起就行了，示意如下：
那么具體如何實(shí)現(xiàn)呢？接著往下看。
二、CSS 濾鏡
首先，單純的 CSS并不能直接做出這種效果，畢竟無(wú)法生成一份相同的圖片，因此，我們需要手動(dòng)創(chuàng)建一個(gè)相同的圖層。
假設(shè)HTML如下：
<div class="wrap">
<img class="cover" src="https://bookcover.yuewen.com/qdbimg/349573/1036370336/180.webp">
</div>為了節(jié)省 dom，我們可以通過(guò)偽元素的方式來(lái)生成這個(gè)圖片，關(guān)鍵代碼如下：
.wrap{
position: relative;
/**/
}
.wrap::before{
content:'';
position: absolute;
background: url("https://bookcover.yuewen.com/qdbimg/349573/1036370336/180.webp");
transform: translate(10px,10px);
}稍微給點(diǎn)偏移，這樣得到了兩層圖片。
然后給這個(gè)偽元素設(shè)置模糊濾鏡就行了。
.wrap::before{
/**/
filter: blur(12px);
}這樣就實(shí)現(xiàn)了文章開(kāi)頭效果。
是不是很簡(jiǎn)單呢？
不過(guò)實(shí)際中可以采用 CSS變量的方式，將需要重復(fù)的圖片抽離出來(lái)。
<div class="wrap" style="--bg: url('https://bookcover.yuewen.com/qdbimg/349573/1036370336/180.webp')">
<img class="cover" src="https://bookcover.yuewen.com/qdbimg/349573/1036370336/180.webp">
</div>然后CSS就可以保持統(tǒng)一了。
.wrap::before{
/**/
background: var(--bg);
}三、SVG濾鏡
有沒(méi)有發(fā)現(xiàn) 上面這種方式需要手動(dòng)去創(chuàng)建一個(gè)一模一樣的圖層有些多余呢？
確實(shí)是這樣，CSS 目前還無(wú)法直接復(fù)制一個(gè)圖層。
Firefox 中有個(gè)element()方法可以根據(jù)dom生成一份完全相同的圖層，但是僅僅 Firefox 支持：https://developer.mozilla.org/en-US/docs/Web/CSS/element。
那么，還有其他方式嗎？
當(dāng)然也是有了，那就是 SVG濾鏡！
和前面的思路其實(shí)是一致的，先模糊圖層，然后偏移一下，用SVG實(shí)現(xiàn)就是。
<svg width="0" height="0">
<filter id="natural-shadow-filter">
<feGaussianBlur stdDeviation="12" />
<feOffset dx="10" dy="10" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</svg>似乎有些看不懂？沒(méi)關(guān)系，我們一步步分析。
首先f(wàn)ilter就濾鏡的意思，表示整個(gè)就是定義了一個(gè)濾鏡，后面可以給 CSS 直接使用。
接著，feGaussianBlur就是高斯模糊，stdDeviation表示模糊的范圍。
然后，feOffset表示偏移，dx和dy分別是水平和垂直方向的位移。
最后是一個(gè)feMerge標(biāo)簽，這個(gè)表示合并，也就是將多個(gè)濾鏡組合起來(lái)，里面的feMergeNode表示每一步濾鏡的結(jié)果。這里有兩個(gè)feMergeNode，第一個(gè)就是前面濾鏡的最終結(jié)果，也就是「模糊」+「偏移」后的效果，第二個(gè)feMergeNode有一個(gè)in參數(shù)，表示輸入，這里設(shè)置的是SourceGraphic，表示原始圖像，也就是處理之前的原圖。這里的疊加順序是后來(lái)居上，也就是原圖放在模糊圖之上。
示意效果如下：
最后，我們?cè)贑SS中直接通過(guò) id 引入的方式使用這個(gè)濾鏡就行了。
.wrap{
filter: url("#natural-shadow-filter");
}效果如下，和 CSS基本一致。
我們還可以多試幾種其他圖片，下面是 CSS 和 SVG 兩種實(shí)現(xiàn)的效果對(duì)比。
你可以查看以下鏈接
- CSS & SVG color shadow(code.juejin)[1]
- CSS & SVG color shadow(codepen.io)[2]
四、總結(jié)一下
以上就是本文的全部?jī)?nèi)容了，主要介紹了 CSS 和 SVG 兩種不同的實(shí)現(xiàn)方式，下面總結(jié)一下
- 彩色陰影其實(shí)原理很簡(jiǎn)單，一張?jiān)瓐D和一張模糊的圖，疊加在一起就行了。
- CSS無(wú)法直接創(chuàng)建一個(gè)完全相同的圖層，需要手動(dòng)去創(chuàng)建。
- 手動(dòng)去創(chuàng)建一個(gè)一模一樣的圖層有些多余，而SVG可以自動(dòng)生成多份。
- SVG可以將多個(gè)效果通過(guò)feMerge進(jìn)行疊加，順序是后來(lái)居上，SourceGraphic表示原始圖像。
- CSS可以通過(guò)url(#id)的方式引入SVG濾鏡。
當(dāng)然，SVG的潛力遠(yuǎn)不僅如此，在圖像處理方面，SVG有著無(wú)可比擬的優(yōu)勢(shì)，CSS 濾鏡可以稱(chēng)之為“殘血版”濾鏡，很多效果還是需要SVG出馬，以后還會(huì)介紹更多實(shí)用場(chǎng)景。
[1]CSS & SVG color shadow (code.juejin)： https://code.juejin.cn/pen/7328684301011124260。
[2]CSS & SVG color shadow (codepen.io)： https://code.juejin.cn/pen/7328684301011124260。
