圓形復選框（checkbox）是網頁設計中常用的交互元素，它可以讓用戶在多個選項中進行選擇。使用CSS來自定義復選框的樣式可以讓頁面更加美觀，下面將介紹如何使用CSS來創建圓形復選框。

/* 圓形復選框的基本樣式 */
input[type="checkbox"] {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
border: 2px solid #ccc;
box-shadow: inset 0 0 0 2px #fff;
transition: all 0.3s ease;
}
/* 選中狀態下圓形復選框的樣式 */
input[type="checkbox"]:checked {
box-shadow: inset 0 0 0 8px #fff;
background-color: #ccc;
border-color: #ccc;
}

以上代碼中，我們首先定義了圓形復選框的基本樣式，包括寬高、背景顏色、圓角邊框、陰影等。可以根據具體需求來調整這些樣式。接著，我們使用偽類選擇器:checked來設置選中狀態下的樣式，包括背景色、邊框顏色、陰影等。同時，我們通過transition屬性設置了動畫效果，使復選框的狀態變化更加平滑。

為了讓復選框的樣式生效，我們還需要在HTML中使用元素，并為其指定一個唯一的id屬性，以便在需要的時候通過label元素來操作復選框的狀態。例如：

選項

以上代碼中，我們定義了一個id為check的復選框，并使用label元素來為其加上文字標簽。注意，label的for屬性值應與input元素的id值相同，這樣點擊label元素時就能將check復選框選中或取消。

使用以上代碼就能夠創建一個簡單的圓形復選框，可以用于網頁中的多選題、表單等場景。當然，如果需要更加個性化的樣式，可以根據實際需要對CSS進行修改。