CSS3可以很方便地用代碼畫(huà)出圓形，而且還可以給圓形加上圓環(huán)，增加視覺(jué)效果。下面我們來(lái)看一看怎么實(shí)現(xiàn)。

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f5f5f5;
}
.circle-border {
border: 5px solid #3498db;
box-sizing: border-box;
}

首先，我們需要用CSS3的border-radius屬性來(lái)實(shí)現(xiàn)一個(gè)圓形。這個(gè)屬性可以讓一個(gè)矩形變成一個(gè)圓形，只需要設(shè)置其值為50%即可。

接下來(lái)，我們需要給這個(gè)圓形加上圓環(huán)。這可以通過(guò)border屬性來(lái)實(shí)現(xiàn)，只需要設(shè)置其寬度、樣式和顏色即可。而且使用box-sizing:border-box來(lái)確保邊框的寬度不會(huì)影響到圓形的大小。

這樣，我們就可以畫(huà)出一個(gè)帶有圓環(huán)的圓形了。可以根據(jù)自己的需要來(lái)調(diào)整圓形的大小和顏色。