radial-gradient用于创建中心向外的渐变，语法为background: radial-gradient(形状/大小/位置, 颜色停止点)；默认椭圆，可设circle、位置at top left等，支持尺寸关键词如farthest-corner和颜色节点，.box{background:radial-gradient(red,yellow,green)}从中心红到黄绿过渡，可叠加多个渐变实现光斑效果。
使用 CSS 的 radial-gradient 可以创建从一个中心点向外扩散的渐变效果。它非常适合用于背景、按钮、卡片等需要视觉层次感的设计元素。
基本语法
background: radial-gradient(形状或大小, 颜色停止点1, 颜色停止点2, ...);
最简单的形式只需要指定颜色，浏览器会自动计算中心位置和渐变类型。
示例：.box {
background: radial-gradient(red, yellow, green);
}
这个例子从中心开始，颜色从红色过渡到黄色再到绿色。
立即学习“前端免费学习笔记（深入）”；
设置渐变形状
默认是椭圆（ellipse），也可以设为圆形（circle）。
- radial-gradient(circle, red, blue) —— 圆形渐变
- radial-gradient(ellipse, red, blue) —— 椭圆渐变（默认）
如果容器宽高不一致，ellipse 会拉伸适应，而 circle 要求半径一致，超出部分不会显示完整圆。
控制大小和位置
可以指定渐变的起始位置和结束形状的大小。
- 位置：用 at center、at top left 或具体值如 at 20% 80%
- 尺寸关键词：closest-side、farthest-corner（常用）、closest-corner、farthest-side
.box {
background: radial-gradient(circle at top left, white, black);
}
这个渐变从左上角开始，向右下方向扩展。
使用尺寸关键词.fancy-bg {
background: radial-gradient(closest-side circle at center, #ffcc00, #ff3366);
}
渐变在碰到最近的边时结束，适合做聚焦光晕效果。
添加颜色停止点
你可以精确控制每种颜色在什么位置出现。
.stop-example {
background: radial-gradient(red 10%, yellow 50%, green 90%);
}
红色从 10% 开始，黄色在 50%，绿色到 90% 结束。中间区域平滑过渡。
还可以叠加多个径向渐变，用逗号分隔：
.multi-gradient {
background:
radial-gradient(circle at 20% 30%, rgba(255,0,0,0.5), transparent 20%),
radial-gradient(circle at 80% 70%, rgba(0,255,0,0.5), transparent 20%),
blue;
}
这可以创建多个光斑叠加在蓝色背景上的效果。
基本上就这些。掌握 radial-gradient 的关键是理解形状、位置、尺寸和颜色分布之间的关系。多试几种组合，就能做出丰富的视觉效果了。不复杂但容易忽略细节。
