實現這樣的效果 簡單

Paste_Image.png

.box {

width: 150px;

display: flex;

justify-content: center;

align-items: center;

height: 200px;

background-color: lightskyblue;

border: 20px solid royalblue;

}

box

但要實現這樣的效果，不包裹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

總結

以上是生活随笔為你收集整理的html多重边框，中间空白,CSS实现多重边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。