CSS3中，我们可以通过修改单选按钮的样式来美化我们的页面。本文将介绍如何使用CSS3修改单选按钮的样式。

/*HTML代码*/
<label>
<input type="radio" name="option">
选项一
</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属性设置为none来实现。接着，我们使用label标签来替代原本的单选按钮，并设置一些样式来美化它。

我们使用:before伪元素来创建一个圆形的外框，并利用+选择器来选择与单选按钮相邻的label标签。当单选按钮被选中后，我们改变:before伪元素的背景色和边框颜色即可。