结论：radial-gradient() 必须显式指定形状、尺寸和位置（at），否则在不同宽高比容器中效果异常；参数顺序为 shape → size → at → 颜色，漏写 at 或错序将导致声明失效。
直接说结论：用 radial-gradient() 函数写在 background 里，但必须显式控制形状、位置和尺寸，否则在不同宽高比容器中效果会飘。
radial-gradient() 的参数顺序不能错
浏览器按固定顺序解析：先形状（circle 或 ellipse），再尺寸（如 closest-side），然后是 at + 坐标，最后才是颜色列表。漏掉 at 却直接写 center，整个声明就失效；把 circle 50px 当成一个词写，其实 50px 是 size 参数，得放在 shape 后面、at 前面。
-
radial-gradient(circle at center, #fff, #000)✅ 最简可用形式 -
radial-gradient(circle center, #fff, #000)❌ 缺at，被忽略 -
radial-gradient(circle 50px at center, #fff, #000)✅ 50px 是 size，合法 -
radial-gradient(ellipse 100px 50px at center, #f00, #00f)✅ 椭圆指定双半径
填满容器又不拉伸变形的关键配置
默认 radial-gradient 是个“图像”，受 background-size 和 background-repeat 控制。只写渐变不配尺寸，常出现只铺中间一块、或空白处露底色的问题。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 想强制贴合容器（哪怕正圆变椭圆）：
background: radial-gradient(...) no-repeat / 100% 100% - 想保持正圆且自动适配：
background: radial-gradient(circle closest-side at center, #e0e0e0, #999)，closest-side会取到最近边的距离作半径 -
background-size: cover对径向渐变无效——它只对图片起作用
IE10/11 和老 Safari 的兼容写法
IE10+ 支持标准语法，但 IE10 不认 at，只能用 top left 这类关键词；IE9 及以下完全不支持，整条声明被丢弃。Safari 5.1 及更早需 -webkit-radial-gradient()，Firefox 3.6 需 -moz-radial-gradient()。
立即学习“前端免费学习笔记（深入）”；
- 安全 fallback 必须加：
background: #6a11cb; background: radial-gradient(...); - 旧版 Safari 兼容写法：
background: -webkit-radial-gradient(center, closest-corner, #ff9a9e, #fad0c4); - 不要依赖在线生成器自动加前缀——它们常漏掉 IE10 的
at降级逻辑
最易被忽略的是：radial-gradient 在响应式布局中不是“自适应”的，它不随容器缩放重算圆心或半径；每次改容器宽高比，都得重新验证 size 参数是否还合理。
