关于前端:CSS-filter-生成不规则边框md

之前做过很多非凡的布局，比方在这两篇文章 CSS 实现优惠券的技巧、CSS 实现反对突变的提示框（tooltips），如下

然而始终有一个痛点就是：无奈给这些图形加上边框

明天带来一个小技巧：利用 drop-shadow 一行代码搞定所有不规则边框

一、投影

这里须要利用投影 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如何生成边框呢？

二、多重投影

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

三、应用和局限

应用形式简略，在容器的最外层加上这一行 CSS 就行了，比方之前的优惠券例子，失去的边框成果这样的

还有这样的

边框还算不错，简直看不出投影

不过这里须要留神的是，通过 mask 裁剪 的图形须要在外层嵌套一层父级，不然投影会被 mask 间接裁剪掉

<div class="wrap">
  <div class="coupon">
   <!-- 优惠券 --> 
  </div>
</div>

另外，这个计划进适宜比拟小的边框，如果较大的边框，可能会比拟圆滑，而且须要叠加更多的滤镜，成果也不太好，如下

这些就须要自行取舍了（个别状况下不会有太粗的边框）

四、总结和阐明

本文介绍了一个实现不规则边框的通用计划，老本非常低，成果也十分不错，这里总结一下：

1. drop-shadow只会对不通明局部生成投影，合乎实在物理世界
2. drop-shadow不反对多重投影，filter反对多重滤镜，能够间接实现多重投影
3. 边框的实现原理是投影的多重叠加
4. 有些通过 mask 裁剪生成的图形，须要在外包裹一层容器，再生成边框
5. 适宜比拟小的边框，过大的边框不太现实
6. 滤镜其实是一个比拟消耗性能的属性，不适宜太范畴应用

可能大部分同学最初可能还是会抉择“切图.png”，不过这也算是一个解决方案，多一种计划总是没错的。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤