实现这样的效果 简单
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
