这是 CSS 和 SVG 技术比较系列文章中的第二篇文章。 目的是通过例子来说明两者的优缺点，更好地帮助你在解决Web制作中常见的设计问题时做出更好的选择。
在上一篇文章中，我们讨论了使用CSS和SVG创建纹理文本的功效，并得出的结论是，现阶段使用SVG比使用CSS更方便、更强大。 在本文中，我们将处理自定义复选框和单选按钮的效果。
您可能已经知道，使用 CSS 设计表单并不是一件容易的事。 但对付它们并不是很难。
在CSS中，我们很难直接通过选择器来美化表单中的复选框和单选按钮，以此来克服这一事实。 前端开发者利用图片来美化。 要在 CSS 中做到这一点，有两种方法。
使用 CSS 使用精灵图像自定义复选框的样式
使用CSS美化复选框和单选按钮最灵活的方式是通过精灵图像，而这个精灵图像包括两种状态：选中和未选中。
假设有一个表单同时具有复选框和单选按钮css3 单选按钮css3 单选按钮，因此我们经常使用包含复选框和单选按钮两种状态的精灵图像。 精灵图像的风格如右图所示：
图像周围的区域是透明的。 每个复选框或单选按钮的大小等于页面上的实际大小。 这样，如果您要在页面上显示的复选框的尺寸为 25px x 25px，则需要保证精灵图像上的图像按钮的尺寸相同。
接下来是在页面上设置复选框，以便可以使用之前的精灵。
它的结构如下所示：
确保
