本文将介紹一種利用 CSS 濾鏡 filter 的 <code>drop-shadow()</code>，實作對 HTML 元素及 SVG 元素的部分添加陰影效果，以實作一種酷炫的光影效果，用于各種不同的場景之中。通過本文，你可以學到：
如何利用 <code>filter: drop-shadow()</code> 對元素的部分内容添加單重及多重陰影，以及利用多重陰影實作 Neon 效果
HTML 元素配合 <code>filter: drop-shadow()</code> 以及 SVG 元素配合 <code>filter: drop-shadow()</code> 生成的光影效果
某天在逛 CodePen 的時候，發現了一個非常有意思的，使用 WebGL 實作的線條光影效果 -- NEON LOVE，非常的有意思：
但是由于源代碼是使用 WebGL 完成，繪制如此簡單的一個效果，通過 GLSL 着色器等代碼，接近了 300 行。
那麼，我們能否使用 HTML(SVG)+CSS 實作它呢？
首先，要實作上述效果，很重要的一步是給元素的部分内容添加上陰影。
假設我們有這樣一個圖形：
我們給這個 div 圖形設定 <code>border-radius: 50%</code>，并且添加一個 <code>border-top</code>：
結果如下：
如果我希望，僅僅隻給這個圓弧添加陰影，嘗試使用 <code>box-shadow</code>：
emm，明顯是不行的，陰影會加給整個 div：
為了解決這種情況，聰明的同學會立馬想到 <code>filter: drop-shadow()</code>，它就是為了解決這個問題而誕生的，<code>box-shadow</code> 屬性在元素的整個框後面建立一個矩形陰影, 而 <code>drop-shadow()</code> 過濾器則是建立一個符合圖像本身形狀(alpha 通道)的陰影。
好，我們使用 <code>drop-shadow()</code> 替換 <code>box-shadow</code>：
這樣，我們就能得到符合圖像本身形狀(alpha 通道)的陰影：
并且，<code>drop-shadow()</code> 也可以對一個圖像作用多次，實作類似陰影的多重陰影效果：
我們将得到可見部分圖案的多重陰影疊加效果：
我們将上述例子的黑白顔色對換一下，就能得到一副很有意境的圖案，像是在深邃的太空中看某個透光的星球般：
CodePen Demo -- multi drop-shadow Neon
接下來，就是實作心形線條動畫了，這點利用 SVG 還是比較簡單的。關于 SVG 線條動畫，之前也有多次提及，感興趣的同學也可以看看這兩篇文字：
【Web動畫】SVG 線條動畫入門
【Web動畫】SVG 實作複雜線條動畫
我們首先需要得到一個利用 SVG <code><Path></code> 實作的心形形狀，可以選擇自己繪制 SVG 路徑，也可以借助一些工具完成。
這裡我借助了這個工具得到一個心形的 Path 路徑：SVGPathEditor
通過工具，快速繪制想要的形狀，拿到對應的 Path：
核心就是拿到這一段 SVG Path 路徑：
有了它，利用 SVG 的 <code>stroke-dasharray</code> 和 <code>stroke-offset</code>，我們可以輕松的得到一個心形追逐動畫：
簡單解釋上上述代碼：
兩個相同的 SVG 圖形，通過 <code>stroke-dashoffset</code> 将完整的線條圖形截成部分
通過 <code>stroke-dashoffset</code> 的從 0 到 928 的變化，實作一次完整的線條動畫循環（這裡的 928 是完整的 path 的長度，可以通過 JavaScript 腳本求出）
整個動畫過程 2s，設定其中一個的 <code>animation-delay: -1s</code>，也就是提前 1s 觸發動畫，這樣就實作了兩個心形線條的追逐動畫
效果如下：
有了上述兩步的鋪墊，這一步就非常好了解了。
最後，我們隻需要給兩段 SVG 線條，利用 <code>drop-shadow()</code> 添加不同顔色的多重陰影即可：
最終，我們就利用 SVG + CSS 近乎完美的複刻了文章開頭使用 WebGL 實作的效果：
完整的代碼，你可以猛擊 -- CSS 靈感 - SVG 配合 drop-shadow 實作線條光影效果
當然，掌握了上述的技巧後，還有非常多有意思的效果我們可以去探索實作的，這裡我簡單的抛磚引玉。羅列兩個我自己嘗試的效果。
其中一大類是運用于按鈕之上，可以實作按鈕帶光影的按鈕效果，下圖是其中一個的示意，巧妙運用 <code>stroke-dashoffset</code>，它可以有非常多的變形：
完整源代碼可以猛擊 CodePen -- Neon Line Button
當然，我們也不是一定要借助 SVG，僅僅是 HTML + CSS 也是可以運用這個效果，利用它實作一個簡單的 Loading 效果：
完整源代碼可以猛擊 CodePen -- Neon Loading
好了，本文到此結束，希望對你有幫助 😃
更多精彩 CSS 效果可以關注我的 CSS 靈感
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。