在網頁設計中，常常需要畫出各種形狀，其中空心圓環是比較常見的一種。本文將介紹如何使用 CSS 畫出一個空心圓環。

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

以上代碼中，我們創建了一個類名為 .circle 的元素，并設置了它的寬度和高度為 100px，邊框為 10px 的黑色實線圓形。接下來，我們需要添加一些樣式來實現空心效果。

.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%;
}

在上面的代碼中，我們為 .circle 添加了一個偽元素 ::before。我們設置了這個元素的寬度和高度為 80px，與外層圓環的邊距為 10px，同時設置它的邊框為 10px 的白色實線圓形。

我們還需要添加一些樣式來讓內部的圓形垂直居中。

.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%);
}

我們設置了 .circle 的 position 為 relative，并將 ::before 的 position 設置為 absolute，同時使用 transform 屬性使其垂直居中。

最后，我們就成功實現了一個空心圓環的效果。