CSS是前端開(kāi)發(fā)中不可或缺的重要技術(shù)，它可以實(shí)現(xiàn)各種酷炫的效果和布局。今天，我來(lái)分享一下如何用CSS實(shí)現(xiàn)帶邊框的六邊形。

.hexagon {
width: 100px;
height: 55px;
background-color: #555;
position: relative;
margin: 50px auto 0;
}
.hexagon:before,
.hexagon:after {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
top: -25px;
border-bottom: 25px solid #555;
}
.hexagon:after {
bottom: -25px;
border-top: 25px solid #555;
}

上面的代碼是實(shí)現(xiàn)六邊形的樣式，通過(guò)設(shè)置寬度和高度、背景色和邊框等屬性，在position為relative的容器中加入:before和:after偽類(lèi)，分別設(shè)置它們的位置和邊框樣式，最終形成六邊形的正面和反面。這里需要注意的是，這個(gè)六邊形的高寬比是1:1.8。

接著，我們來(lái)寫(xiě)一個(gè)加上邊框的六邊形代碼：

.hexagon-with-border {
width: 100px;
height: 55px;
position: relative;
margin: 50px auto 0;
}
.hexagon-with-border:before,
.hexagon-with-border:after {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon-with-border:before {
top: -25px;
border-bottom: 25px solid #555;
border-top: 7px solid #444;
z-index: 1;
}
.hexagon-with-border:after {
bottom: -25px;
border-top: 25px solid #555;
border-bottom: 7px solid #444;
z-index: 1;
}
.hexagon-with-border:before,
.hexagon-with-border:after,
.hexagon-with-border div {
box-sizing: border-box;
}
.hexagon-with-border div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #555;
border: 7px solid #444;
z-index: -1;
}

在上面這段代碼中，我們通過(guò)給:before和:after加上邊框，然后用div元素作為背景來(lái)實(shí)現(xiàn)了帶邊框的六邊形效果。需要注意的是，這里的box-sizing屬性要設(shè)置為border-box，這樣才能保證邊框不會(huì)影響到元素的盒子大小。

以上就是使用CSS實(shí)現(xiàn)帶邊框的六邊形的代碼和一些實(shí)現(xiàn)原理的介紹。希望這篇文章能對(duì)大家了解CSS技術(shù)和實(shí)現(xiàn)復(fù)雜效果有所幫助。