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>

效果如下：