CSS实现多重边框

实现这样的效果 简单

Paste_Image.png

.box {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: lightskyblue;
    border: 20px solid royalblue;
}
<div class="box">
    box
</div>

但要实现这样的效果，不包裹div的前提下，使用outline属性

Paste_Image.png

.box {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: lightskyblue;
    border: 20px solid royalblue;
    outline: solid 20px brown;
}

但要实现这样的效果 outline 是不行的

Paste_Image.png

如果使用 outline 只会这样

.box {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: lightskyblue;
    border: 20px solid royalblue;
    border-radius: 30px;
    outline: solid 20px brown;
}

Paste_Image.png

但是用阴影 box-shadow 可以做到 就像这样

.box {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: lightskyblue;
    border: 20px solid royalblue;
    border-radius: 30px;
    box-shadow: 0 0 0 20px brown;
}

Paste_Image.png

还能这样

.box {
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: lightskyblue;
    border: 20px solid royalblue;
    border-radius: 30px;
    box-shadow: 0 0 0 20px brown,
                0 0 0 40px salmon,
                0 0 0 60px crimson;
}

Paste_Image.png