结论：用 background-size 动画控制 radial-gradient 半径扩张最可靠；因浏览器不支持直接动画渐变内部 stop 值（如 70%），而 background-size 是广泛兼容且硬件加速的方案，通过缩放渐变图像实现视觉扩散，需匹配渐变透明起点与 size 终值以防失真。
直接说结论：用 background-size 动画控制 radial-gradient 的半径扩张，是最可靠、兼容性最好、无需 JS 的方案；但必须写对渐变结构和尺寸起止值，否则动画会拉伸失真或完全不动。
为什么不能直接动画 radial-gradient 的颜色 stop 百分比？
浏览器不支持对 radial-gradient 函数内部参数（如 50%、70%）做 CSS 动画。哪怕你用 CSS 变量包裹 stop 位置，在 Chrome 94 之前、Safari 15.3 及更早版本中，transition 会失效或跳变。Firefox 虽支持变量驱动的 stop 动画，但多层叠加时渲染一致性差。真正被广泛支持且硬件加速的，只有 background-size 和 background-position。
background-size: 0 0 → 200% 200% 是怎么控制扩散的？
关键在于：radial-gradient 本身是“固定图像”，而 background-size 控制的是这张渐变图在容器里的缩放比例。从 0 0 开始，相当于把整个渐变压缩成一个点；放大到 200% 200%，就让渐变从中心撑满并溢出容器——视觉上就是“由中心向外扩散”。
- 必须用两个值（宽、高），比如
0 0和200% 200%，单值0或200%会被解释为等比缩放，可能变形 - 起始值
0 0对应“无可见渐变”，终点值建议 ≥200% 200%，确保在各种宽高比下都能覆盖全容器 - 渐变本身要写成
radial-gradient(circle at center, #007bff 0%, transparent 70%)—— 这里的70%是透明起点，必须和background-size终点匹配，否则边缘会出现硬边或色块残留
Safari 15.4 以下怎么 fallback？
Safari 15.3 及更早不支持 background-size 动画作用于渐变背景，会静止在初始状态。此时需降级为 transform: scale() 模拟：
立即学习“前端免费学习笔记（深入）”；
button {
background: radial-gradient(circle at center, #007bff 0%, transparent 70%);
transition: background-size 0.25s ease;
}
button:active {
background-size: 200% 200%;
}
@supports not (background-size: 0 0) {
button:active {
transform: scale(1.1);
opacity: 0.95;
}
}
注意：@supports not (background-size: 0 0) 比检测具体属性值更稳妥，因为 Safari 旧版虽认得 background-size 这个属性名，但不支持它对渐变生效。
容易被忽略的三个细节
第一，radial-gradient 必须配合 background-image 使用，写成 background: ... 会覆盖掉 background-color 且无法单独控制 size；第二，如果元素有 border-radius，但渐变没设 circle，默认椭圆会在圆角区域产生割裂感；第三，多个 radial-gradient 叠加时，每层都要独立控制 background-size，不能共用一个 transition，否则各层动画节奏不同步，会发灰或闪烁。
