CSS图片单选框是一种常见的页面元素，它的作用是让用户在多个选项中选择一项。通过CSS技术，我们可以使用图片来替换原生的单选框，并且可以自定义选中的样式。

/* 原生单选框的样式 */
input[type="radio"] {
-webkit-appearance: radio;
appearance: radio;
}
/* 使用图片替换原生单选框 */
input[type="radio"] {
display: none; /* 隐藏原生单选框 */
}
input[type="radio"] + label {
display: inline-block;
cursor: pointer;
background: url("radio.png") no-repeat;
width: 20px;
height: 20px;
vertical-align: middle;
}
input[type="radio"]:checked + label {
background-position: -20px 0;
}

代码中，我们首先将原生的单选框隐藏，然后使用标签来替代单选框，同时设置背景图片和尺寸。通过:checked伪类，我们可以实现选中状态的变化。

在使用CSS图片单选框的时候，我们需要注意以下几点：

• 要确保每个单选框都有一个关联的标签，且的for属性值与单选框的id相同。
• 图片大小要和原生单选框大小相同，并且需要保证选中状态的背景位置和未选中状态不同。
• 如果需要自定义选中状态的样式，可以使用:checked伪类来实现。