CSS的radio按钮是一种选择器，可以用来给使用者提供多个选项中的一种选择。在HTML中，这个选项通常是由一个单选框组成。

如果单选框很基础，那么通过CSS来美化它就会变得又有趣又有挑战。

/* 通用样式 */
input[type="radio"] {
display: none;
}
/* 未选中状态的样式 */
input[type="radio"] + label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #ccc;
margin-right: 10px;
vertical-align: middle;
}
/* 选中状态的样式 */
input[type="radio"]:checked + label:before {
background-color: #007bff;
border-color: #007bff;
}
/* 标签的样式 */
label {
display: inline-block;
cursor: pointer;
font-size: 16px;
line-height: 20px;
vertical-align: middle;
}

在这个示例中，我们通用地隐藏了`input[type="radio"]`元素，这意味着使用者不能通过单击单选框来选择它们的选项。要选中选项，必须通过“标签”元素。

每个标签都有一个与之相关联的单选框元素。我们的样式使用 `input[type="radio"] + label:before` 对未选中的单选框进行样式设置，使用 `input[type="radio"]:checked + label:before` 对选中状态的单选框进行样式设置。我们还添加了适当的间距和光标样式，以使它们看起来好看并易于使用。

现在您知道如何创建一个一对一的CSS即单选按钮，您可以将其应用于您稍后构建的表单中。享受！