CSS 奇思妙想 - 利用 filter 生成不規則邊框

本文由 XboxYan 授權進行原創發佈

原文鏈接： https://juejin.cn/post/6994625063127351303

之前做過很多特殊的佈局，比如在這兩篇文章

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

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

一、投影

這裏需要利用投影 drop-shadow， 不太瞭解的可以參考 這篇文章: 被低估的 CSS 濾鏡：drop-shadow[3]，這裏簡單介紹一下

語法其實很簡單

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

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

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

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

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

二、多重投影

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[4]，還有這個 tooltips-border[5]

三、使用和侷限

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

還有這樣的

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

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

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

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

這些就需要自行取捨了（一般情況下不會有太粗的邊框）

四、總結和說明

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

  1. drop-shadow 只會對不透明部分生成投影，符合真實物理世界

  2. drop-shadow 不支持多重投影，filter 支持多重濾鏡，可以間接實現多重投影

  3. 邊框的實現原理是投影的多重疊加

  4. 有些通過 mask 裁剪生成的圖形，需要在外包裹一層容器，再生成邊框

  5. 適合比較小的邊框，過大的邊框不太理想

  6. 濾鏡其實是一個比較耗費性能的屬性，不適合太範圍使用

可能大部分同學最後可能還是會選擇 “切圖. png”，不過這也算是一個解決方案 ，多一種方案總是沒錯的。最後，如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉發❤❤❤

參考資料

[1]

https://juejin.cn/post/6945023989555134494: https://juejin.cn/post/6945023989555134494

[2]

https://juejin.cn/post/6971261516284690468: https://juejin.cn/post/6971261516284690468

[3]

https://zhuanlan.zhihu.com/p/195792157: https://link.juejin.cn?target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F195792157

[4]

https://codepen.io/xboxyan/pen/jOmeoPd: https://link.juejin.cn?target=https%3A%2F%2Fcodepen.io%2Fxboxyan%2Fpen%2FjOmeoPd

[5]

https://codepen.io/xboxyan/pen/wvdQgXK: https://link.juejin.cn?target=https%3A%2F%2Fcodepen.io%2Fxboxyan%2Fpen%2FwvdQgXK

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/fOHxGMZTSic_HNlgh8OgPg

猜你喜歡