在網頁設計中，單選按鈕（Radio Button）是一種非常常見的表單元素。我們可以使用CSS來控制單選按鈕的樣式，讓其更加美觀和符合我們的設計需求。

input[type="radio"] {
/*去掉默認樣式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*設置寬高,相當于外層容器*/
width: 20px;
height: 20px;
/*設置邊框*/
border: 2px solid #ccc;
border-radius: 50%;
/*設置背景色*/
background-color: #fff;
/*設置選中狀態下的背景色*/
&:checked {
background-color: #007bff;
}
}

上面的代碼中，我們首先去掉了默認的樣式，然后設置了單選按鈕的寬高、邊框和背景色。在選中狀態下，我們再設置了背景色，這樣就可以達到更好的可視化效果。

當然，如果我們想要單選按鈕更加個性化，還可以添加一些其他的樣式，比如修改選中狀態下的顏色、添加動畫效果等。

input[type="radio"] {
/*去掉默認樣式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*設置寬高,相當于外層容器*/
width: 20px;
height: 20px;
/*設置邊框*/
border: 2px solid #ccc;
border-radius: 50%;
/*設置背景色*/
background-color: #fff;
/*添加動畫效果*/
transition: all 0.3s ease;
/*設置選中狀態下的背景色和邊框顏色*/
&:checked {
background-color: #007bff;
border-color: #007bff;
}
/*添加hover效果，鼠標懸浮時的樣式*/
&:hover {
border-color: #007bff;
}
}

上面的代碼中，我們添加了動畫效果和hover效果，使單選按鈕更加個性化和醒目。此外，我們還修改了選中狀態下的顏色和邊框顏色，以適應不同的設計需求。

總的來說，通過使用CSS來控制單選按鈕的樣式，我們可以使其更加美觀、符合設計需求，并且提升用戶體驗。