使用radial-gradient()可创建圆形或椭圆的径向渐变，语法为radial-gradient([shape size] at position, start-color, ..., end-color)；2. shape定义形状如circle或ellipse，size控制渐变范围如closest-side或farthest-corner，position设置中心点如top left；3. 颜色值按顺序定义渐变节点，支持多色过渡；4. 示例包括从中心蓝到白的圆形渐变、中心移至左上角的红黄绿三色渐变，以及基于容器边距响应的closest-side效果；5. 灵活组合参数可实现突出焦点或柔和背景的视觉设计。
使用CSS的radial-gradient()函数可以轻松创建径向渐变效果，也就是从一个中心点向外扩散的渐变。它支持圆形和椭圆形状，适合用于背景、按钮、卡片等视觉设计。
基本语法结构
radial-gradient()的基本写法如下：
-
shape：定义渐变的形状，可选
circle（圆形）或ellipse（椭圆） -
size：控制渐变的大小，如
closest-side、farthest-corner等 - position：设置渐变中心位置，默认是 center
- 颜色值：按顺序定义渐变的颜色节点
创建简单的圆形渐变
下面是一个从中心开始，由蓝色过渡到白色的圆形渐变：
background: radial-gradient(circle, blue, white);这个例子中，circle 明确指定为圆形，浏览器会从中心点均匀向外扩散颜色。
立即学习“前端免费学习笔记（深入）”；
调整渐变中心与颜色节点
你可以改变渐变的起始位置和添加多个颜色：
background: radial-gradient(circle at top left, red, yellow 50%, green);- 渐变中心移到左上角
- 红色开始，黄色在50%位置，绿色结束
- 适用于需要强调某一区域的设计
控制渐变范围大小
使用关键词控制渐变的覆盖范围：
background: radial-gradient(circle closest-side, #ff9a9e, #fad0c4);-
closest-side：渐变在碰到最近的边时结束 -
farthest-corner：延伸到最远的角落 - 适合不同容器尺寸下的响应式设计
基本上就这些。掌握 radial-gradient 的参数组合，就能灵活做出柔和的背景或突出焦点的视觉效果，不复杂但容易忽略细节。
