自定义单选图标对齐问题，看起来像椭圆形

基础概念

自定义单选图标对齐问题通常涉及到前端开发中的CSS样式和布局。单选按钮（radio button）是一种常见的表单控件，用于在一组选项中选择一个。默认情况下，单选按钮的图标是一个小圆圈，但在某些设计需求下，可能需要将其替换为自定义图标，并确保这些图标在页面上正确对齐。

类型

纯CSS实现：通过CSS伪元素和背景图片来实现自定义图标。
SVG图标：使用SVG格式的图标，可以提供更好的缩放效果和性能。
图片图标：使用PNG、JPEG等图片格式的图标。

应用场景

表单设计：在复杂的表单中，使用自定义图标可以使表单更加易读和美观。
导航菜单：在导航菜单中使用自定义图标，可以增强视觉效果和用户体验。
设置页面：在设置页面中，使用自定义图标可以使选项更加直观和易于理解。

问题及解决方法

问题：自定义单选图标看起来像椭圆形

这通常是由于CSS样式设置不当导致的图标变形。以下是一些可能的原因和解决方法：

宽高不一致：确保自定义图标的宽度和高度一致，避免图标变形。
宽高不一致：确保自定义图标的宽度和高度一致，避免图标变形。
边框半径：如果使用了圆角边框，确保边框半径设置正确。
边框半径：如果使用了圆角边框，确保边框半径设置正确。
背景图片：如果使用背景图片，确保图片本身是正方形且没有变形。
背景图片：如果使用背景图片，确保图片本身是正方形且没有变形。
伪元素：如果使用CSS伪元素来实现自定义图标，确保伪元素的宽高和边框设置正确。
伪元素：如果使用CSS伪元素来实现自定义图标，确保伪元素的宽高和边框设置正确。

示例代码

以下是一个使用CSS伪元素实现自定义单选图标的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Radio Button</title>
    <style>
        .custom-radio {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
            cursor: pointer;
        }
        .custom-radio::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            transition: background-color 0.3s;
        }
        .custom-radio:checked::before {
            background-color: #007bff;
        }
    </style>
</head>
<body>
    <label>
        <input type="radio" name="option" class="custom-radio">
        Option 1
    </label>
    <label>
        <input type="radio" name="option" class="custom-radio">
        Option 2
    </label>
</body>
</html>