CSS 使用 radial-gradient() 函数实现从中心点向外扩散的渐变效果，是圆形 / 椭圆形扩散样式，和线性渐变方向不同。
基础语法
css
background: radial-gradient(形状 大小 at 中心位置, 颜色1, 颜色2, ...);
1. 最简单示例（默认效果）
css
.box {
width: 300px;
height: 200px;
/* 从中心红色 → 黄色 → 蓝色 径向渐变 */
background: radial-gradient(red, yellow, blue);
}
2. 常用写法（带参数）
css
/* 圆形渐变、居中、红到绿 */
background: radial-gradient(circle at center, red, green);
/* 椭圆形（默认）、右下角起点 */
background: radial-gradient(ellipse at bottom right, #fff, #000);
/* 指定颜色断点（精准控制） */
background: radial-gradient(circle, #ff6b6b 0%, #4ecdc4 50%, #f7d794 100%);
3. 常用参数说明
circle：正圆形渐变ellipse：椭圆形渐变（默认）at center/top/right/bottom/坐标：设置渐变中心点- 颜色后可加
百分比：控制渐变位置
4. 完整可运行代码
html
预览
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
width: 400px;
height: 300px;
/* 圆形径向渐变：中心白 → 粉 → 紫 */
background: radial-gradient(circle at center, #fff, #ff9a9e, #b19cd9);
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
总结
- 径向渐变 = 中心向外扩散
- 关键字：
radial-gradient() - 可控制：形状、中心点、颜色、位置
- 兼容所有现代浏览器，直接使用即可
