實(shí)現(xiàn)這樣的效果 簡單
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>
但要實(shí)現(xiàn)這樣的效果够滑，不包裹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;
}
但要實(shí)現(xiàn)這樣的效果 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
