復(fù)選框是我們常用的一種表單元素之一，為了美觀而且與眾不同，我們經(jīng)常會對其樣式進行調(diào)整。接下來，我來介紹如何使用CSS將復(fù)選框變成圓形的形狀。

/* 使用CSS樣式設(shè)置復(fù)選框 */
input[type="checkbox"] {
/* 隱藏復(fù)選框原有的樣式 */
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
/* 設(shè)置寬高為16px */
width:16px;
height:16px;
/* 圓角設(shè)置為50% */
border-radius: 50%;
/* 邊框樣式、顏色、粗細設(shè)置 */
border: 1px solid #a0a0a0;
/* 背景色和選中后的背景色設(shè)置 */
background-color: #fff;
}
/* 設(shè)置復(fù)選框選中時的樣式 */
input[type="checkbox"]:checked {
background-color: #0076ff;
}

以上代碼中，我們首先將復(fù)選框原有的樣式隱藏，這樣才能進行下一步樣式設(shè)置。然后，我們設(shè)置復(fù)選框的寬和高為16px，并將邊框的圓角設(shè)置為50%。通過這樣的設(shè)置，我們就將復(fù)選框變成了圓形。接著我們設(shè)置邊框的樣式、顏色、粗細和背景色和選中后的背景色。我們可以根據(jù)需要更改這些樣式。最后，我們還設(shè)置了復(fù)選框選中時的樣式，使其有明顯的區(qū)分。通過這些樣式設(shè)置，我們就可以將復(fù)選框變成圓形，是不是很簡單呢？