在平時(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 濾鏡可以稱之為“殘血版”濾鏡，很多效果還是需要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。