在網(wǎng)頁(yè)設(shè)計(jì)中，常常需要畫出各種形狀，其中空心圓環(huán)是比較常見的一種。本文將介紹如何使用 CSS 畫出一個(gè)空心圓環(huán)。

.circle {
width: 100px;
height: 100px;
border: 10px solid #000000;
border-radius: 50%;
}

以上代碼中，我們創(chuàng)建了一個(gè)類名為 .circle 的元素，并設(shè)置了它的寬度和高度為 100px，邊框?yàn)?10px 的黑色實(shí)線圓形。接下來(lái)，我們需要添加一些樣式來(lái)實(shí)現(xiàn)空心效果。

.circle {
width: 100px;
height: 100px;
border: 10px solid #000000;
border-radius: 50%;
box-sizing: border-box;
}
.circle::before {
content: "";
display: block;
width: 80px;
height: 80px;
margin: 10px;
border: 10px solid #ffffff;
border-radius: 50%;
}

在上面的代碼中，我們?yōu)?.circle 添加了一個(gè)偽元素 ::before。我們?cè)O(shè)置了這個(gè)元素的寬度和高度為 80px，與外層圓環(huán)的邊距為 10px，同時(shí)設(shè)置它的邊框?yàn)?10px 的白色實(shí)線圓形。

我們還需要添加一些樣式來(lái)讓內(nèi)部的圓形垂直居中。

.circle {
width: 100px;
height: 100px;
border: 10px solid #000000;
border-radius: 50%;
box-sizing: border-box;
position: relative;
}
.circle::before {
content: "";
display: block;
width: 80px;
height: 80px;
margin: 10px;
border: 10px solid #ffffff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

我們?cè)O(shè)置了 .circle 的 position 為 relative，并將 ::before 的 position 設(shè)置為 absolute，同時(shí)使用 transform 屬性使其垂直居中。

最后，我們就成功實(shí)現(xiàn)了一個(gè)空心圓環(huán)的效果。