CSS3中，我們可以通過修改單選按鈕的樣式來美化我們的頁面。本文將介紹如何使用CSS3修改單選按鈕的樣式。

/*HTML代碼*/
<label>
<input type="radio" name="option">
選項(xiàng)一
</label>
/*CSS3代碼*/
input[type="radio"] {
display: none;
/*讓原本的單選按鈕不顯示*/
}
label {
display: inline-block;
cursor: pointer;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="radio"] + label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px solid #ccc;
margin-right: 10px;
}
input[type="radio"]:checked + label:before {
background: #333;
border-color: #333;
}

首先，我們需要讓原本的單選按鈕不顯示，可以通過將它的display屬性設(shè)置為none來實(shí)現(xiàn)。接著，我們使用label標(biāo)簽來替代原本的單選按鈕，并設(shè)置一些樣式來美化它。

我們使用:before偽元素來創(chuàng)建一個(gè)圓形的外框，并利用+選擇器來選擇與單選按鈕相鄰的label標(biāo)簽。當(dāng)單選按鈕被選中后，我們改變:before偽元素的背景色和邊框顏色即可。