Angular自定义CSS单选按钮：缩放时内圈错位问题的解决

我开发的Angular 16自定义单选按钮组件有明确设计要求：

• 外圆固定尺寸为16px×16px
• 选中状态下内圆固定为8px×8px
• 内圈必须始终完美居中于外圆，浏览器缩放时也不能偏移

一开始尝试了多种居中方案，包括Flexbox居中、transform: translate、结合translateZ(0)的transform缩放、固定尺寸布局等，但都没能彻底解决问题——浏览器缩放时内圈还是会出现轻微错位。

最终解决方案 #

移除.inner-circle元素的背景和边框样式，转而给.radio-button容器添加径向渐变背景：

.radio-button {
  width: 16px;
  height: 16px;
  border: 1px solid var(--gray-400);
  border-radius: 50%;
  /* 其他基础布局样式 */
}

.radio-button.checked {
  background-image: radial-gradient(circle, var(--primary-700) 45%, transparent 54%);
}

通过径向渐变直接绘制内圈，利用CSS渐变的自动居中特性，无论浏览器如何缩放，内圈都能始终完美居中于外圆内，彻底解决了错位问题。

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