要得到严格圆形渐变，必须显式声明circle关键字和at 50% 50%（或at center）；否则默认按容器宽高比拉伸为椭圆；颜色停靠点需合理分布避免色带断裂，且需添加纯色fallback保障兼容性。
radial-gradient() 圆形渐变怎么写才真圆
默认不是正圆，而是椭圆——因为 radial-gradient() 在没指定形状时，会按容器宽高比拉伸。想得到严格圆形，必须显式声明 circle 关键字。
- 错误写法：
background: radial-gradient(red, blue)→ 容器宽≠高时，渐变是椭圆 - 正确写法：
background: radial-gradient(circle, red, blue)→ 强制等宽高等半径的圆 - 如果还要控制大小，优先用
closest-side或farthest-corner这类关键词，而不是固定像素值，避免响应式下溢出或过小
center 位置不居中？检查 background-position 和渐变原点
即使写了 circle，中心也可能偏移。原因通常是：渐变原点（at）没设，或被 background-position 覆盖。
-
radial-gradient(at 50% 50%, circle, red, blue)显式设中心，比依赖默认更可靠 - 如果同时用了
background-position: center，而渐变里又没写at，两者行为可能不一致（尤其在多背景层时） - 移动端 Safari 对
at的解析稍旧，建议用百分比或关键词（如at center），少用像素值
颜色停靠点（color stop）设错导致色带断裂或晕染过快
径向渐变的颜色过渡不像线性渐变那样“均匀铺开”，半径增长是非线性的，停靠点位置对视觉影响极大。
- 别写
radial-gradient(circle, red 0%, blue 100%)—— 最外圈颜色会非常薄，几乎看不见蓝 - 改用
radial-gradient(circle, red 0%, red 70%, blue 100%)，给主色留足空间 - 想柔化边缘？加一个透明过渡层：
radial-gradient(circle, red 0%, red 80%, rgba(255,0,0,0) 100%) - 注意：多个 stop 之间不能倒序，
red 50%, red 30%会导致未定义行为（部分浏览器渲染异常）
兼容性与性能：老浏览器 fallback 和硬件加速陷阱
IE10+ 支持标准语法，但 IE9 及更早必须用 filter（已淘汰）；另外，radial-gradient 在某些低端 Android WebView 中会触发 CPU 渲染，卡顿明显。
- 现代项目可放心用，但需加一层纯色 fallback：
background: #ff0000; background: radial-gradient(circle, #ff0000, #0000ff) - 避免在
transform: scale()元素上叠加复杂径向渐变，GPU 合成可能失效，退回到软件渲染 - 动画渐变中心（比如
@keyframes { background-position: ... }）可行，但动画radial-gradient(at ...)中的at值——多数浏览器不支持，会跳变
circle 关键字和 at center 的组合，一不留神就变成压扁的蛋。渐变本身不难，难在默认行为和直觉不一致。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
