CSS实现多重边框

想到多重边框，我们可能会通过多个元素来模拟实现，但是如何在一个元素上实现多重边框呢？如下图：

1、box-shadow

我们可以通过box-shadow来实现。
box-shadow： h-shadow v-shadow blur spread color inset | outset；
分别是：水平阴影位置 垂直阴影位置 模糊距离 扩张半径 颜色 内部阴影或者外部阴影
实现多重边框我们可以通过扩张半径来实现，box-shadow可以通过逗号分隔设置多个值。
注意：

• box-shadow是层层叠加的，第一次的在最上面，以此类推，因此后面的都是（2px+2px）;
• 投影和边框不同，它不影响布局，不会受box-sizing的影响，可以通过padding或者margin来模拟box-shadow所需要的空间
• 如果是按钮等需要鼠标的点击或者悬停效果的，这时你可以将box-shadow设置为inset，通过padding来留出所需的空间

.test-list{
    width: 100px;
    height: 100px;
    background: red;
    border: 2px solid orange;
    box-shadow: 0 0 0 2px yellow,0 0 0 4px green,0 0 0 6px burlywood;
    margin: 6px;
    border-radius: 10px;
}

<div class="test-list"></div>

2、outline

box-shadow只能实现实线边框，对于虚线的边框我们应该怎么办呢？
注：可以通过outline-offset属性来控制他和元素边框之间的间距，这个属性值设置可以接收负值。
但是使用的时候以下的地方需要注意：
- outline不支持逗号分隔的多个属性，因此，这种只适用于双层边框；
- outline不会贴合border-radius产生圆角的效果，只适用于方形

.test-list{
    width: 100px;
    height: 100px;
    background: red;
    border: 2px dashed green;
    outline: 2px dashed orchid;
    background-clip: content-box;
}

<div class="test-list"></div>

效果如下：