结论：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 控制。只写渐变不配尺寸，常出现只铺中间一块、或空白处露底色的问题。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 想强制贴合容器（哪怕正圆变椭圆）：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 参数是否还合理。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！