css不规则边框的用法

这篇文章主要介绍“css不规则边框的用法”，在日常操作中，相信很多人在css不规则边框的用法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css不规则边框的用法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联秉承实现全网价值营销的理念，以专业定制企业官网，成都网站制作、网站设计，小程序制作，网页设计制作，手机网站制作，成都营销网站建设帮助传统企业实现“互联网+”转型升级专业定制企业官网,公司注重人才、技术和管理，汇聚了一批优秀的互联网技术人才,对客户都以感恩的心态奉献自己的专业和所长。

大家可能都习惯了使用box-shadow来设置盒阴影，但顾名思义，盒阴影一般阴影的投影是一个方形，如果我们遇到其他情况，想要做阴影效果应该怎么实现呢？

之前做过很多特殊的布局，比如在这两篇文章 CSS 实现优惠券的技巧 、CSS 实现支持渐变的提示框（tooltips），如下

但是一直有一个痛点就是：无法给这些图形加上边框

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

一、投影

这里需要利用投影 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;
}

三、使用和局限

使用方式简单，在容器的最外层加上这一行 CSS 就行了，比如之前的优惠券例子，得到的边框效果这样的

还有这样的

边框还算不错，几乎看不出投影

不过这里需要注意的是，经过 mask 裁剪的图形需要在外层嵌套一层父级，不然投影会被 mask 直接裁剪掉