CSS是前端開發中非常重要的一項技術，它的作用是為網頁美化提供強有力的支持。在這篇文章中，我們將探討如何使用CSS來寫單選按鈕。

input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 18px;
height: 18px;
border: 1px solid #bdc3c7;
background-color: #ffffff;
transition: all 0.15s ease-out 0s;
margin-right: 5px;
position: relative;
top: 3px;
}
input[type="radio"]:focus {
outline: none;
}
input[type="radio"]:checked {
background-color: #3498db;
border-color: #3498db;
}
input[type="radio"]:checked::before {
content: "";
display: block;
width: 8px;
height: 8px;
margin: 3px 0px 0px 3px;
background-color: #ffffff;
border-radius: 50%;
}

以上代碼使用了CSS3提供的很多新特性，讓單選按鈕變得更有吸引力。

首先，我們使用appearance屬性來隱藏瀏覽器默認的按鈕樣式。接著，我們添加了一些樣式來美化按鈕，比如圓角、邊框、寬高等屬性。我們使用了過渡效果來實現選中和未選中之間的平滑切換。在選中按鈕時，我們改變了背景色和邊框顏色。同時，我們使用before偽元素來添加選中時的小圓圈。

總體而言，這些樣式會讓你的單選按鈕看起來更加美觀和現代化。你可以將此代碼應用于你的下一個項目中，并且可以根據需要進行調整和修改。希望這篇文章對你幫助！