CSS 圓圈對號是設計網頁時經常用到的一種效果，它可以讓網頁元素更加美觀和易于閱讀。在本文中，我們會介紹如何使用 CSS 來實現圓圈對號效果。

首先，我們需要定義一個 HTML 元素作為圓圈的容器。我們可以使用標準的 div 元素，并在 CSS 中設置其樣式。

<div class="circle">
<span class="checkmark"></span>
</div>

上面的代碼中，我們定義了一個 class 為 circle 的 div 元素，并將其作為圓圈的容器。為了實現對號效果，我們需要在容器內部添加一個 span 元素，這個元素將作為對號的容器。

接下來，我們需要在 CSS 中設置圓圈和對號的樣式。

.circle {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #333333;
display: inline-block;
text-align: center;
}
.checkmark {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #333333;
margin-top: 3px;
transform: rotate(45deg);
}

上面的代碼中，我們通過設置 width 和 height 屬性來定義圓圈的大小，并使用 border-radius 屬性將其變成一個圓形。同時，我們還設置了背景顏色和邊框，使其具有實際的圓圈效果。

對于對號的樣式，我們使用了一個較小的圓形，并使用 transform 屬性將其旋轉45度，從而實現對號的效果。同時，我們還設置了 margin-top 屬性，使其與圓圈底部對齊。

最后，我們只需要通過添加相應的 class 名稱，即可將上述樣式應用到任何需要使用圓圈對號的元素上。

<p>這是一個帶有圓圈對號的段落</p>
<p class="circle">這是一個只有圓圈的段落</p>

通過上述代碼，我們可以輕松地在網頁中創建出美觀的圓圈對號效果。