17370845950

radial-gradient()用于创建从中心向外扩散的渐变效果，基本语法为background: radial-gradient(形状或大小, 颜色1, 颜色2, ...); 可设置圆形或椭圆形状、大小关键词如closest-side、中心位置at top right等，颜色可指定停止点；现代浏览器均支持，需至少定义两种颜色，未指定形状时默认为椭圆，常与background-size等属性配合使用以增强视觉层次。

在 CSS 中，radial-gradient() 用于创建径向渐变效果，即从一个中心点向外扩散的渐变。它常用于背景设计，能实现丰富的视觉层次。

基本语法结构

radial-gradient() 的基本写法如下：

background: radial-gradient(形状或大小, 颜色1, 颜色2, ...);

其中可选参数包括：

• 渐变形状：可以是 circle（圆形）或 ellipse（椭圆）
• 渐变大小：如 closest-side、farthest-corner 等
• 中心位置：用 at center、at top left 或具体坐标设定
• 颜色停止点：可指定颜色及其位置，如 red 20%

常见使用示例

下面是一些实用的代码示例：

• 默认椭圆渐变：
  background: radial-gradient(red, blue);
• 圆形渐变：
  background: radial-gradient(circle, yellow, green);
• 指定中心位置：
  background: radial-gradient(at top right, white, black);
• 带尺寸控制的渐变：
  background: radial-gradient(closest-side circle at center, #fff, #000);
• 多色并设置颜色点：
  background: radial-gradient(yellow 10%, orange 30%, red 70%);

浏览器兼容性与注意事项

现代浏览器都支持 radial-gradient()，但需注意：

• 颜色至少要定义两个，否则不会产生渐变
• 若未指定形状，默认根据容器比例生成椭圆
• 位置关键词如 at 50% 50% 可精确控制起点
• 可结合 background-size 和其他背景属性搭配使用

基本上就这些。掌握 radial-gradient 能让你的页面背景更有设计感，不复杂但容易忽略细节。