在網頁設計中，常常需要使用圓形的圖像。而使用CSS可以很方便地繪制出各種形狀的圖形。在本文中，我們將介紹如何繪制一個中心透明的圓形。

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: solid 2px black;
}
.circle:before {
content: "";
display: block;
width: 90px;
height: 90px;
margin: 5px;
border-radius: 50%;
background-color: white;
}

首先，我們需要使用CSS3的border-radius屬性來創建一個圓形的元素，這里設定寬度和高度都為100px，并設置邊框寬度為2px，顏色為黑色。但是，這樣繪制出來的圓形是不透明的，我們需要使用::before偽元素來創建中心透明的圓形。

::before偽元素在.circle元素內部的第一個子元素<p>前創建了一個空元素，大小為90px，背景顏色為白色，且使用border-radius屬性也設置為圓形。由于::before元素是在.circle元素內部的第一個子元素前創建的，因此白色圓形將位于黑色圓形中心的位置。

通過以上CSS代碼就可以實現繪制中心透明的圓形。我們也可以使用不同的顏色組合，從而實現更加豐富的效果。