如何快速实现多重边框 | CSS实现边框的4种方式

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战css

双重边框甚至多重边框是设计上的经常使用样式，如何用代码实现呢？html

层叠DOM元素

最原始的方法天然是能够经过层叠不一样背景色的DOM元素来实现，经过调整DOM元素的大小和背景色从而实现设置多重边界的目的。markdown

好比要实现两个边框，则须要至少编写两个包裹的DOM，内层DOM设置border为第一层边框，内层覆盖外层后，外层漏出的部分显示为外层边框。oop

实现效果以下图所示：为了说明层叠DOM效果，添加了一个动画效果。post

具体实现代码以下所示：动画

<!DOCTYPE html>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
<style> body { background: black; } .outer { background: lightblue; width: 300px; height: 300px; margin: 50px; position: relative; } .inner { background: lightcoral; width: 200px; height: 200px; border: 25px solid lightgreen; position: absolute; top: 25px; left: 500px; animation: move 10s infinite; } @keyframes move { from { left: 500px; } to { left: 25px; } } </style>

</html>

复制代码

可是这种方法繁琐，且若是更多边框的话会形成DOM过多，代码一点儿都不优雅，很差，很差！ui

CSS除border外其余实现边框的方式

CSS除border外是否还有其余实现边框的方式呢？有的。spa

outline

该属性为设置DOM的轮廓。设计

MDN官方文档：developer.mozilla.org/zh-CN/docs/…code

outline是outline-color，outline-style，outline-width的简写。

border 和 outline 很相似，但有以下区别：

outline不占据空间，绘制于元素内容周围。

根据规范，outline一般是矩形，但也能够是非矩形的。

box-shadow

box-shadow是添加阴影的，那么怎么用它设置边框呢？

该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色，X轴偏移量、Y轴偏移量、模糊半径均设置为0，仅设置扩散半径与颜色，则效果与边框是同样的。

并且，根据《CSS Secret》中阐述，box-shadow支持逗号分隔，如：box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;,

如何能够很方便的给元素添加多重边框。

以下图为一个复杂的多重边框图案，可是其代码十分简单

实现代码：

<!DOCTYPE html>

<body>
    <div class="my-transparent">11111</div>
</body>
<style> body { background: black; } .my-transparent { margin-left: 100px; margin-top: 100px; border-radius: 10px; background: white; width: 300px; height: 300px; /*核心代码*/ border: 10px solid hsla(0,0%,100%,.5); outline: 10px solid deeppink; box-shadow: 0 0 0 20px white, 0 0 0 30px green, 0 0 0 40px yellow, 0 0 0 50px blue; } </style>
</html>
复制代码

总结

4种方式：

DOM重叠
border
outline: 不支持border-radius
box-shadow