本文介绍了如何使用CSS的box-shadow、outline和border-colors属性来实现多边框效果，以及如何处理CSS透明边框的问题。通过box-shadow的spread参数和多个阴影叠加可以创建多重边框，同时指出了box-shadow不占空间和无法捕获事件的特性。使用outline可以创建内外双层边框，但仅限于两层，且不能呈现圆角。border-colors属性在Firefox中支持多边框颜色，但兼容性不佳。对于透明边框，通过调整background-clip可以防止背景颜色影响边框的透明效果。
Backgrounds & Borders Level 3 还是一份草案的时候，CSS WG 就在是否支持多重边框的问题进行了大量的探讨，就像是讨论多重背景图片一样。不幸的是，当时认为多重边框的用处并不大，即使需要也可以使用border-image属性来模拟。不过，WG显然忘记了在 CSS 代码中灵活地调整边框，才是我们需要的，现在开发者只能使用一些Hack手段来模拟多重边框，比如使用多重元素的嵌套来模拟多重边框。现在，我将告诉你一些更优秀的方法，无需使用多余的标签即可实现多重边框。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
box-shadow解决方案
现在，大多数的时候都用box-shadow来创建阴影。不过，很少有人知道它还接受第四个参数(spread)，该参数可以缩放阴影的范围。比如下面的示例，我们创建了一个水平和垂直偏移量为0 的阴影，它就使用了上述所说的第四个参数：
CSS Code复制内容到剪贴板
background: yellowgreen;
box-shadow: 0 0 0 10px #655;
效果如下图所示：
图注：使用 box-shadow 模拟边框线
这还不够令人惊讶，因为它和我们使用 border 创建的边框差不多。不过，强大的是我们可以使用逗号来创建任意数量的阴影。所以，只需要继续添加阴影就可以实现多重阴影了，比如，添加一个颜色为 deeppink 的边框：
CSS Code复制内容到剪贴板
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
