在CSS中，畫空心圓可以使用border-radius和border屬性。我們可以為一個元素添加一個圓形邊框并將元素的背景顏色設置為透明。

.example {
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #000;
background-color: transparent;
}

在這個代碼中，我們使用border-radius屬性將元素的四個角變成圓形，取值為50%即可。然后我們使用border屬性來繪制一個寬度為10px、顏色為黑色的邊框。最后將元素的背景顏色設置為透明即可。

如果我們想要畫一個不同顏色的空心圓，只需要改變border的顏色。例如，我們要畫一個紅色的空心圓，代碼如下：

.example {
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #ff0000;
background-color: transparent;
}

當然，你也可以通過設置border-width屬性來改變圓的厚度。例如，下面的代碼會畫一個寬度為20px的黃色空心圓：

.example {
width: 100px;
height: 100px;
border-radius: 50%;
border: 20px solid #ffff00;
background-color: transparent;
}

最后，我們需要注意的是，在某些舊版瀏覽器中，不支持border-radius屬性，因此我們需要添加一個瀏覽器前綴，例如：

.example {
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 10px solid #000;
background-color: transparent;
}

上面的代碼中，我們分別添加了webkit和moz前綴，以確保在不同的瀏覽器中都能正常顯示。現在您已經知道如何使用CSS在網頁中畫空心圓，趕緊試一試吧！