CSS是前端开发中不可或缺的一部分，它可以通过样式来美化页面，为网站添加视觉吸引力。在CSS中，我们还可以改变一些元素的颜色来让网站看起来更加整洁，其中之一就是改变radio的颜色。下面我们来看一下如何使用CSS来改变radio的颜色。

/*在样式表中输入以下代码*/
/*首先将所有radio设置为透明度为0*/
input[type="radio"] {
opacity: 0;
}
/*创建一个新div来代替所有的radio*/
.radio {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
background-color: #ccc; /*设置radio默认颜色*/
}
/*为radio添加选中状态的颜色*/
.radio::after{
content: " ";
display: block;
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: white;
line-height: 10px;
text-align: center;
color: #333;
font-size: 12px;
font-weight: bold;
box-shadow: 0px 2px 5px rgba(117, 117, 117, 0.37);
}
/*悬停状态的颜色*/
.radio:hover::after {
background-color: #666;
color: white;
}
/*选中状态的颜色*/
input[type="radio"]:checked + .radio::after {
background-color: #2176ff;
color: white;
}

以上代码可以实现将radio的默认颜色改为灰色，在选中时显示蓝色，悬停时改变颜色，并且选中时的小圆点会有投影效果。

使用CSS来改变radio的颜色可以使网站看起来更加美观大方，当然我们还可以根据自己的需要，在代码中调整颜色大小等相关参数，最终使网站达到我们要求的视觉效果。