CSS 可以實現(xiàn)各種花樣效果，其中中間鏤空的圓形是一種比較特別的效果，可以用來展示圖片或者文字。下面是一個使用 CSS 實現(xiàn)中間鏤空的圓形的例子。

.circle {
width: 200px;
height: 200px;
border: 1px solid #000;
border-radius: 50%;
position: relative;
}
.circle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
background-color: #fff;
}

首先，我們創(chuàng)建一個容器元素，設(shè)置寬度和高度為 200 像素，邊框?qū)挾葹?1 像素，邊框樣式為實線，邊框顏色為黑色，邊框為圓形。然后，我們需要創(chuàng)建一個偽元素，使用 content 屬性和空字符串創(chuàng)建一個空的內(nèi)容。利用絕對定位，將它放在父元素的中心位置，使用 transform 屬性將它水平和垂直方向上移動了 50%，使其居中。設(shè)置寬度和高度為 100 像素，邊框顏色為黑色，背景顏色為白色，邊框為圓形。這個偽元素的作用是把它覆蓋在父元素上，形成了一個中間鏤空的圓形。

通過上面的 CSS 代碼，我們就成功地實現(xiàn)了一個中間鏤空的圓形。如果我們需要修改圓形的大小，只需要修改它們的寬度和高度即可。