CSS filter 生成不規則邊框

以前作過不少特殊的佈局，好比在這兩篇文章 CSS 實現優惠券的技巧 (juejin.cn)、CSS 實現支持漸變的提示框（tooltips） (juejin.cn)，以下

可是一直有一個痛點就是：沒法給這些圖形加上邊框

今天帶來一個小技巧：利用 drop-shadow 一行代碼搞定全部不規則邊框

1、投影

這裏須要利用投影 drop-shadow， 不太瞭解的能夠參考 這篇文章: 被低估的CSS濾鏡：drop-shadow，這裏簡單介紹一下

語法其實很簡單

filter: drop-shadow(offset-x offset-y blur-radius color)
複製代碼

並非一個單獨的屬性，而是 filter 濾鏡下的一個方法

這裏 offset-x、offset-y爲偏移量，blur-radius爲模糊半徑，color爲投影顏色。實際做用就是能夠模擬真實世界的投影（透明的部分不會投影），區別以下

惋惜的是，雖然和 box-shadow 比較相似，可是少了擴展半徑。試想一下，若是支持了擴展半徑，那不規則邊框是否是很容易了（應該不會支持了，由於真實世界的投影也沒有擴展半徑）？

那麼，drop-shadow如何生成邊框呢？

2、多重投影

box-shadow 能夠很輕易的實現多重陰影

box-shadow: 0 0 3px #333, 1px 1px 5px #666, ...
複製代碼

能夠無限疊加下去。

可是，drop-shadow可就不行了，好比

filter: drop-shadow(0 0 3px #333, 1px 1px 5px #666, ...)
複製代碼

能夠看到瀏覽器直接認爲非法了

不過能夠換一種思路，雖然 drop-shadow不支持，可是filter支持多種濾鏡，因此能夠這樣來實現

filter: drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333)...
複製代碼

這樣就能夠生效了

是否是有點像邊框了？若是隻設置 0.5px 的模糊，多疊加幾回，模糊的部分會變清晰，這個就有點像一個比較軟的筆觸，多畫幾筆就變清晰了，因而能夠獲得這樣的效果

這樣就更加接近了，實踐下來，可能須要微調，這裏給出一個比較完美的方案（重點來了~ ）

.wrap{
  filter: drop-shadow(0px 0px 0.5px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333)
}
複製代碼

這樣實現的邊框已經足夠清晰，基本能夠平常使用了

這段代碼中顏色比較多，能夠優化一下，投影的顏色默認是跟隨當前文字顏色的，因此能夠簡化爲

.wrap{
  filter: drop-shadow(0 0 0.5px)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0);
  color: #333;
}
複製代碼

線上示例可訪問 coupon-border，還有這個 tooltips-border

3、使用和侷限

使用方式簡單，在容器的最外層加上這一行 CSS 就好了，好比以前的優惠券例子，獲得的邊框效果這樣的

還有這樣的

邊框還算不錯，幾乎看不出投影

不過這裏須要注意的是，通過 mask 裁剪的圖形須要在外層嵌套一層父級，否則投影會被 mask 直接裁剪掉

<div class="wrap">
  <div class="coupon">
   <!--優惠券--> 
  </div>
</div>
複製代碼

另外，這個方案進適合比較小的邊框，若是較大的邊框，可能會比較圓滑，並且須要疊加更多的濾鏡，效果也不太好，以下

這些就須要自行取捨了（通常狀況下不會有太粗的邊框）

4、總結和說明

本文介紹了一個實現不規則邊框的通用方案，成本很是低，效果也很是不錯，這裏總結一下：

1. drop-shadow只會對不透明部分生成投影，符合真實物理世界
2. drop-shadow不支持多重投影，filter支持多重濾鏡，能夠間接實現多重投影
3. 邊框的實現原理是投影的多重疊加
4. 有些經過mask裁剪生成的圖形，須要在外包裹一層容器，再生成邊框
5. 適合比較小的邊框，過大的邊框不太理想
6. 濾鏡實際上是一個比較耗費性能的屬性，不適合太範圍使用

可能大部分同窗最後可能仍是會選擇 「切圖.png」，不過這也算是一個解決方案 ，多一種方案老是沒錯的。最後，若是以爲還不錯，對你有幫助的話，歡迎點贊、收藏、轉發❤❤❤