自定义单选框时为何圆点不居中？1px边框内边距换2px就显示正常

核心原因 #

这是浏览器亚像素取整渲染带来的典型小尺寸元素渲染偏差问题，和样式逻辑本身没有错误。

偏差产生的具体逻辑 #

实现的自定义单选框开启了box-sizing: border-box，总视觉尺寸为1em，整个区域的像素被拆分成三部分：

• 外边框：上下左右各1px
• 边框与内部圆点的间隙：靠1px的上下左右内边距实现
• 内部实心圆点的尺寸：撑满剩下的全部内容区宽度

当页面开启非整数比例的缩放（比如系统设置125%、150%显示缩放，或是浏览器字体大小设置了非默认的15px、17px这类非整数值），1em对应的实际渲染像素会变成带小数的非整数值。浏览器渲染时无法拆分出小于1物理像素的独立色块，会自动按照就近原则做整数取整：

• 某一侧的小数像素被向上取整，占满1个物理像素
• 另一侧的小数像素被向下取整，占用更少的物理像素

这种取整偏差在本身尺寸很小的元素上会被无限放大：原本设计的1px间隙，可能某一侧实际只有0.5px宽、另一侧有1.5px宽，人眼一眼就能看出间隙不对称、不均匀。

为什么把边框和padding从1px改成2px就恢复正常 #

间隙宽度从1px升到2px之后，整体的取整容错空间被大幅拉高：
同样是0.5px的取整偏差，放在1px宽度的间隙上，视觉占比偏差达到50%，差异非常明显；但放在2px宽度的间隙上，偏差占比只有25%，再叠加圆形边缘的抗锯齿效果，人眼基本感知不到差异，视觉上就会呈现完全均匀的状态。

推荐修复方案 #

• 放弃用父元素内边距撑开间隙的实现逻辑，改用绝对定位控制内部圆点位置：给.radio__custom加position: relative，把::after伪元素设置为绝对定位，用inset: 1px让圆点距离容器四边恰好1px，搭配margin: auto自动居中，从逻辑上避开依赖父元素剩余空间计算尺寸带来的取整偏差。
  修正后的SCSS参考：

.radio {
  &__input {
    display: none;
  }

  &__custom {
    position: relative;
    padding: 0; // 移除原来的1px内边距
    border: 1px solid lightgray;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    box-sizing: border-box;
    
    &::after {
      content: '';
      position: absolute;
      inset: 1px; // 距离四边1px，刚好形成目标间隙
      margin: auto;
      width: auto;
      height: auto;
      background-color: blue;
      border-radius: 50%;
    }
  }
}

• 直接把整体尺寸从em单位替换为固定的整数值像素，比如把容器宽高设为固定的16px，在常规渲染场景下从根源上消除非整数像素的计算问题。
• 如果需要适配多端缩放场景，可以给容器加1px的透明外描边做渲染缓冲，抵消边缘取整带来的视觉偏差。

内容的提问来源于stack exchange，提问作者blueberry