radial-gradient 的圆心默认在元素正中心（50% 50%），即背景容器的中心；可使用 at top left（等价于 at 0% 0%）移至左上角，注意关键词顺序为垂直在前、水平在后，且 at 前后需有空格。
radial-gradient 的圆心默认在哪儿？
不写位置参数时，radial-gradient 的圆心默认是 50% 50%，也就是元素正中心。但这个“中心”是相对于整个渐变容器（比如 background-image 所在的 box）计算的，不是相对于内容或文字——很多人调了半天发现没动，其实是忘了背景定位受 background-position 影响，而渐变本身的位置又和它耦合。
怎么把圆心移到左上角？
直接在 radial-gradient 函数里加位置关键词或坐标：
background: radial-gradient(circle at top left, #fff, #000);
这里 top left 是等价于 0% 0% 的简写；也可以写成 at 20px 30px 或 at 10% 25%。注意：关键词顺序固定是「垂直方向 水平方向」（和 background-position 一致），别写成 left top——虽然部分浏览器能容错，但 CSS 规范明确要求先 vertical 后 horizontal。
-
at前后必须有空格，写成atleft或at left（多一个空格）都会让整条声明失效 - 如果用了
background-position: center，它会覆盖radial-gradient里的at定位，优先级更高——这是最容易踩的坑 -
circle和ellipse对圆心偏移无影响，只是形状不同
用百分比偏移时为什么看起来“不准”？
因为百分比是相对于容器尺寸算的，不是相对于渐变自身大小。比如 at 80% 80% 表示从容器左上角出发，横走 80% 宽、竖走 80% 高的位置——但如果你的渐变尺寸被 background-size 缩小了，这个点仍然按容器原始尺寸算，视觉上就容易偏。
立即学习“前端免费学习笔记（深入）”；
- 想精确控制，优先用像素值（如
at 120px 40px），尤其当容器宽高不确定时 - 如果必须用百分比，确认
background-size没有设成cover或contain，否则容器内背景图缩放会导致定位漂移 - 调试时可以临时加上
background-color: red看容器边界，再叠一层半透明白色 div 标出目标圆心点
Firefox 里 radial-gradient 圆心偏移失效？
老版本 Firefox（at 语法支持不全，尤其是带空格的关键词组合（如 top left）可能被忽略，回退到默认中心。现代 Firefox 没问题，但如果你还在维护兼容 IE/旧 Firefox 的项目：
- 改用绝对坐标：
at 0 0比at top left更稳 - 避免混合单位，比如
at 10% 20px在某些旧引擎里会直接丢弃整条声明 - 可以用
@supports (background: radial-gradient(at 0 0, red, blue))做特性检测，fallback 到纯色或图片
圆心偏移看着简单，实际卡点全在「谁在控制定位」——radial-gradient 自己的 at、background-position、background-size、甚至父容器的 transform 都可能插手。调的时候先关掉其他背景相关属性，单留渐变，一步步加回来。
