radial-gradient中心默认50% 50%，需设明确宽高防偏移；色标位置影响过渡效果，如#ff0 0%, transparent 70%；动画须用CSS变量控制色标，不可直接过渡background-image。
radial-gradient 的中心点和颜色停止位置怎么设才不偏移
默认 radial-gradient 的中心是 50% 50%，但“看起来没居中”往往是因为容器没设置宽高、或父元素有 padding / margin 干扰了视觉定位。它本身不依赖元素内容，只认盒模型的 border box。
- 确保目标元素有明确的
width和height（比如width: 200px; height: 200px;），否则可能按内容撑开，导致渐变“跑偏” - 避免用
padding模拟尺寸，改用box-sizing: border-box统一计算基准 - 显式写明中心：用
radial-gradient(circle at center, ...)比省略更稳妥；center等价于50% 50%，但可读性更好
如何让颜色从中心纯色平滑扩散到透明/背景色
关键在颜色停止点的位置控制。如果两个色标位置太近（比如 #ff0 0%, #ff0 10%），扩散就生硬；如果第二个色标太远（比如 100%），边缘会过淡甚至“看不见变色”。实际效果取决于容器尺寸和预期动效节奏。
- 常用组合：
radial-gradient(circle at center, #ff0 0%, transparent 70%)—— 70% 是经验值，适配多数中等尺寸元素 - 想强调“爆发感”，把第二色标提前到
40%~50%；想柔和过渡，延至80%~90% - 别用
rgba(255,255,0,0)代替transparent，某些旧版 Safari 对前者解析不稳定
动画 radial-gradient 为什么不动？CSS 变量 + background-position 不起作用
radial-gradient 本身不是可动画属性，直接对 background-image 做 transition 或 @keyframes 无效。真正能动的是它的“位置”和“尺寸”，但 radial-gradient 的中心和半径不是独立属性，得靠间接方式。
- 方案一（推荐）：用 CSS 变量控制色标位置，再配合
transition，例如：div { --stop: 60%; background: radial-gradient(circle at center, #f00 0%, transparent var(--stop)); transition: --stop 0.3s ease; }<br>div:hover { --stop: 30%; } - 方案二：用
background-size+background-position配合大渐变图，但性能差、难精确控制扩散感 - 注意：Firefox 对 CSS 变量驱动的
radial-gradient动画支持良好；Chrome 95+、Safari 15.4+ 也稳定，但 IE 完全不支持
多层 radial-gradient 叠加时颜色发灰或变暗怎么办
叠加多个 radial-gradient 作为 background-image 时，浏览器按层叠顺序混合（类似 Photoshop 的 Normal 模式），不是简单透明叠加。尤其当多层都含透明区域，底层颜色会反复透出，造成灰浊感。
立即学习“前端免费学习笔记（深入）”；
- 优先用单层实现复杂效果，比如：
radial-gradient(circle at center, #f00 0%, #ff0 40%, transparent 80%)替代两层红+黄 - 必须多层时，把最外层设为
transparent结尾，并控制每层的色标范围不重叠（如第一层0%–50%，第二层50%–100%） - 检查是否误用了
background-blend-mode，默认是normal，除非刻意要混合效果，否则别加
