radial-gradient基本语法为radial-gradient([shape || size] [at position], color-stop...)，必需参数是至少两个颜色值；默认shape为ellipse、size为farthest-corner，但推荐显式指定circle at center等以确保可控性。
radial-gradient 基本语法和必需参数
不写形状或尺寸时，radial-gradient 默认用 ellipse（椭圆）和 farthest-corner（最远角）作为渐变范围，但实际项目中几乎总要显式控制——否则在不同宽高比容器里效果飘忽不定。
最简可用形式是：radial-gradient(circle at center, #fff, #000)。其中 circle 指定形状，at center 定位圆心，后面是颜色停止点。
常见错误：漏掉 at 关键字却写 center，浏览器会直接忽略整个声明；把 circle 50px 当成一个整体写，其实 50px 是 size 参数，必须跟在形状之后、at 之前。
-
radial-gradient(circle at 20% 30%, red, blue)：圆心在距左20%、距顶30%处 -
radial-gradient(ellipse 100px 50px at center, #f00, #00f)：水平半径100px、垂直半径50px的椭圆 -
radial-gradient(farthest-side at right bottom, #fff, #333)：从右下角出发，边缘止于最近边
如何让 radial-gradient 填满整个元素而不拉伸变形
默认情况下，radial-gradient 生成的是一个“图像”，受 background-size 和 background-repeat 影响。如果只写渐变没配尺寸，它可能只铺中间一小块，或重复平铺（尤其当颜色停止点没覆盖全范围时）。
填满且不扭曲的关键是组合使用：background-size: 100% 100% + background-repeat: no-repeat。但更稳妥的做法是直接用 background 简写，一并控制：
background: radial-gradient(circle at center, #e0e0e0, #999) no-repeat / 100% 100%;
注意：/ 后面是 background-size，不是斜杠分隔符；如果省略 no-repeat，而渐变本身没覆盖全部区域，空白处会显示第二层背景或父元素颜色。
- 用
100% 100%会强制拉伸渐变贴合容器，可能使圆形变椭圆 - 想保持正圆又填满，改用
closest-side或farthest-side作 size，它们按容器边界自动计算半径 - 响应式场景下，
background-size: cover不适用于radial-gradient，它只对图片有效
兼容性与 fallback 处理（IE11 及更老浏览器）
IE10+ 支持标准 radial-gradient，但 IE10 需带 -ms- 前缀，且不支持 at 语法（只能靠位置关键词如 top left）。IE9 及以下完全不支持，会直接丢弃该声明。
安全做法是叠加一层纯色 background 作为降级：
background: #f5f5f5;<br>background: radial-gradient(circle at center, #f5f5f5, #e0e0e0);
现代 CSS 顺序保证后声明覆盖前声明，IE9 只认第一行，新浏览器用第二行。不要试图用 @supports 包裹——IE11 不支持该规则，反而导致无渐变。
- PostCSS 的
autoprefixer会自动加-ms-radial-gradient，但仅限旧语法（如center, #000, #fff），无法转译at形式 - 若需支持 IE10 且必须用圆心定位，得写两套：一套无前缀带
at，一套带-ms-前缀用center关键词 - 移动端 Safari 早于 iOS 10 对
closest-corner等关键字支持不全，建议优先用closest-side或像素值
性能提示：避免在动画中频繁修改 radial-gradient
把 radial-gradient 用在 transition 或 @keyframes 中改变圆心位置或颜色，会导致浏览器每次重绘都重新生成整张渐变图，尤其在大屏或高DPI设备上掉帧明显。
真正需要动效时，优先考虑：
- 用
transform: translate()移动一个带渐变的伪元素（::before），而非改背景本身 - 颜色变化可用
background-color过渡 + 半透明渐变层叠，比改整个radial-gradient轻量 - 圆心位移若必须，用
will-change: background-position提示浏览器优化，但别滥用
调试时打开 DevTools 的 Rendering 面板勾选 “Paint flashing”，能直观看到哪些区域因渐变重绘被频繁标记为绿色——那是性能瓶颈的明确信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
