如何缩小CSS径向渐变颜色过渡距离 实现锐利边缘白环效果

你的径向渐变效果不符合预期的核心原因是色标顺序写反了：CSS径向渐变默认从圆心（0%位置）向外围（100%位置）渲染色值，你当前写的色标位置是乱序的，才会导致外边缘过渡范围失控。

核心修改点 #

1. 重写径向渐变色标顺序 #

按「从圆心向外」的顺序排列色值，严格控制过渡区间长度，就能实现内边缘完全锐利、外边缘仅带极细微柔边的白环效果：

background-image: radial-gradient(circle, black 54%, white 54%, white 58%, black 60%);

各段参数的作用：

• black 54%：圆心到54%半径的区域全为纯黑，和下一个同位置的白色标直接衔接，内边缘零过渡，完全锐利，这个区域就是用来承载页面内容的黑色区块
• white 54% 到 white 58%：54%~58%半径区间全为纯白，这4%的区间就是白环厚度，后续你可以自行调整两个值的差修改环的粗细
• white 58% 到 black 60%：仅用2%的半径区间做白到黑的过渡，视觉上非常锐利，只有极细微的柔边，不会出现大段模糊的问题。如果要更锐利就把60%改成59%（过渡区间1%，接近硬边），要稍柔和一点就改成61%即可
• 60%半径以外的区域全为纯黑，没有多余过渡

2. 补全背景适配属性，保证响应式和长内容承载 #

你当前的背景配置缺少尺寸约束，在内容变长（比如后续加10~20个复选框）或者屏幕比例变化时容易出现变形、露白问题，补充以下属性即可，其余复选框、内容区的样式完全不需要改动：

body {
  /* 原有属性保留 */
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  /* 替换原有渐变，新增尺寸和最小高度约束 */
  background-image: radial-gradient(circle, black 54%, white 54%, white 58%, black 60%);
  background-size: 100vw 100vh;
  min-height: 100vh;
}

html {
  /* 原有属性保留 */
  scroll-behavior: smooth;
  min-height: 100%;
}

参数调整技巧 #

后续你自行微调效果的时候可以参考：

• 调整内部黑色内容区大小：修改第一个black的位置百分比，数值越大黑区范围越大，白环越靠外
• 调整白环厚度：保持第一个white的位置和black位置一致（保证内边缘硬边），修改第二个white的位置，两个white值的差就是环的厚度
• 调整外边缘锐利度：修改最后一个black的位置，它和前一个white的位置差越小，外边缘越锐利

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