radial-gradient 默认画椭圆是因为起始形状是ellipse而非circle；要画圆必须显式声明circle，并配合closest-side或farthest-corner等size关键词控制半径范围。
radial-gradient 画圆时为什么总是椭圆？
默认不是圆，是因为 radial-gradient 的起始形状是椭圆（ellipse），不是圆（circle）。浏览器按容器宽高比自动拉伸，宽高不等时必然变椭圆。
- 要强制画圆，必须显式写
circle：比如radial-gradient(circle, red, blue) - 如果只写
radial-gradient(red, blue)，实际等价于radial-gradient(ellipse, red, blue) - 用
circle后，渐变半径会以较短边为基准；若想撑满容器，得配合closest-side或farthest-corner这类尺寸关键词
radial-gradient 的 size 关键词怎么选？
size 控制渐变范围，直接影响颜色过渡是否“溢出”或“太局促”，不是可有可无的参数。
-
closest-side：到最近边的距离（横向/纵向取小值），适合居中圆斑，安全不溢出 -
farthest-corner：到最远角的距离，常用于全屏柔和晕染，但可能在窄屏下让中心色块过小 -
100px这类绝对值：可控性强，但响应式布局里容易失配，慎用于移动端 - 漏写 size 时默认是
farthest-corner，这点很多人不知道，导致在不同尺寸容器里表现不一致
多色停止点写错位置，颜色就断层
radial-gradient 的颜色停止点（color stop）位置一旦超出 0%–100%，或顺序错乱，就会出现意外空白或跳变。
- 所有停止点必须非递减：比如
red 0%, yellow 50%, blue 30%是错的，30%在50%后面会导致黄色之后直接跳蓝，中间缺过渡 -
0%和100%不写也行，但省略后浏览器按比例插值，有时不如显式控制稳 - 常见误写：
radial-gradient(circle, #fff, #000 200px)——200px 是绝对长度，在小容器里直接超出，结果只剩一个白点
兼容性坑：Safari 对 at position 支持差
用 at 指定圆心位置（如 radial-gradient(circle at 20% 30%, ...)）在 Safari 15.4 之前不支持，且旧版连 at 50% 50% 都可能偏移。
立即学习“前端免费学习笔记（深入）”；
- 如果必须偏移圆心，优先用
at left 20px top 30px这种相对定位写法，兼容性更好 - Safari 中
at后跟百分比时，建议同时设background-size配合，否则可能按 background-origin 计算基准，导致偏移失效 - 测试时别只看 Chrome，用真机 Safari 打开，尤其注意圆心是否真的落在预期像素点上
radial-gradient 看似简单，但圆心、尺寸、停止点三者一联动，改一个就可能牵出两个异常。最麻烦的是它不报错，只默默渲染出奇怪结果——所以调的时候最好打开开发者工具，把 background 拆成单层渐变单独预览。
