CSS radial-gradient函数详解

基本语法

关键参数详解

[1. 渐变形状（Shape）](#1. 渐变形状（Shape）)

[2. 渐变大小（Size）](#2. 渐变大小（Size）)

[3. 中心点位置（Position）](#3. 中心点位置（Position）)

[4. 颜色断点（Color Stops）](#4. 颜色断点（Color Stops）)

常见应用场景

[1. 基本圆形渐变](#1. 基本圆形渐变)

[2. 椭圆渐变](#2. 椭圆渐变)

[3. 模拟光源效果](#3. 模拟光源效果)

[4. 多色渐变](#4. 多色渐变)

[5. 重复放射性渐变](#5. 重复放射性渐变)

高级技巧

[1. 创建圆形光晕](#1. 创建圆形光晕)

[2. 组合多个渐变](#2. 组合多个渐变)

[3. 实现 3D 球体效果](#3. 实现 3D 球体效果)

注意事项

示例代码

radial-gradient() 是 CSS 中用于创建放射性渐变 的函数，它会从一个中心点向外扩散形成圆形或椭圆形的渐变效果。与线性渐变（linear-gradient）不同，放射性渐变的颜色过渡是从中心向四周辐射的。

基本语法

css

css 复制代码

background: radial-gradient(
  [shape] [size] [at position],
  color-stop1,
  color-stop2,
  ...
);

核心参数 ：
- shape：渐变形状（圆形或椭圆形）。
- size：渐变的大小（如 closest-side、farthest-corner）。
- position：渐变中心点的位置（如 center、top left）。
- color-stop：颜色断点（如 red 0%, blue 100%）。

关键参数详解

1. 渐变形状（Shape）

circle：圆形（等宽高）。
ellipse：椭圆形（默认值，根据容器比例自适应）。

css

css 复制代码

.circle-gradient {
  background: radial-gradient(circle, red, yellow);
}

.ellipse-gradient {
  background: radial-gradient(ellipse, red, yellow);
}

2. 渐变大小（Size）

控制渐变结束点的位置，可选值：

closest-side：渐变到最近的边停止。
closest-corner：渐变到最近的角停止。
farthest-side：渐变到最远的边停止（默认值）。
farthest-corner：渐变到最远的角停止。
具体长度值（如 100px）或百分比（如 50%）。

css

css 复制代码

.closest-side {
  background: radial-gradient(circle closest-side, red, yellow);
}

.farthest-corner {
  background: radial-gradient(circle farthest-corner, red, yellow);
}

3. 中心点位置（Position）

使用 at 关键字指定中心点，语法与 background-position 类似：

关键字（如 at top left、at center）。
长度值（如 at 20px 50px）。
百分比（如 at 30% 70%）。

css

css 复制代码

.top-left {
  background: radial-gradient(circle at top left, red, yellow);
}

.custom-position {
  background: radial-gradient(circle at 20% 80%, red, yellow);
}

4. 颜色断点（Color Stops）

与线性渐变类似，可指定多个颜色及其位置：

css

css 复制代码

multi-color {
  /* 从红到绿到蓝的渐变 */
  background: radial-gradient(circle, red 0%, green 50%, blue 100%);
}

常见应用场景

1. 基本圆形渐变

css

css 复制代码

.circle {
  background: radial-gradient(circle, #ff9a9e, #fad0c4);
}

2. 椭圆渐变

css

css 复制代码

.ellipse {
  background: radial-gradient(ellipse, #a1c4fd, #c2e9fb);
}

3. 模拟光源效果

css

css 复制代码

.light {
  background: radial-gradient(circle at center, white, rgba(255,255,255,0) 70%);
}

4. 多色渐变

css

css 复制代码

rainbow {
  background: radial-gradient(
    circle,
    red 0%, orange 20%, yellow 40%,
    green 60%, blue 80%, purple 100%
  );
}

5. 重复放射性渐变

使用 repeating-radial-gradient() 创建重复图案：

css

css 复制代码

.stripes {
  background: repeating-radial-gradient(
    circle,
    #f0f0f0,
    #f0f0f0 10px,
    #e0e0e0 10px,
    #e0e0e0 20px
  );
}

高级技巧

1. 创建圆形光晕

css

css 复制代码

.halo {
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    rgba(255,255,255,0.8) 0%,
    rgba(255,255,255,0) 70%
  );
  border-radius: 50%;
}

2. 组合多个渐变

通过 background-image 叠加多个渐变：

css

css 复制代码

.combined {
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255,94,247,0.4) 0%, rgba(218,255,165,0.4) 90.1%),
    radial-gradient(circle at 80% 50%, rgba(0,255,255,0.4) 0%, rgba(255,121,0,0.4) 90%);
}

3. 实现 3D 球体效果

css

css 复制代码

.ball {
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle at 30% 30%,
    white 0%,
    #66ccff 20%,
    #0066cc 100%
  );
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

注意事项

浏览器兼容性

所有现代浏览器均支持，IE10+ 需要前缀 -webkit-。
性能考虑

复杂的渐变（如多层叠加、高分辨率）可能影响渲染性能。

回退方案

建议为不支持渐变的浏览器提供纯色背景：

css

css 复制代码

.element {
  background: #ccc; /* 回退颜色 */
  background: radial-gradient(circle, #fff, #ccc);
}

渐变定位与尺寸
- 使用 circle 时，确保容器是正方形，否则会自动变为椭圆。
- size 参数可能影响渐变的视觉效果，需根据需求调整。

示例代码

html

预览

html 复制代码

<style>
  .example {
    width: 300px;
    height: 200px;
    margin: 20px;
    border-radius: 10px;
  }
  
  .basic-circle {
    background: radial-gradient(circle, #ff5e62, #ff9966);
  }
  
  .custom-size {
    background: radial-gradient(circle closest-side at 20% 30%, #4facfe, #00f2fe);
  }
  
  .multiple-colors {
    background: radial-gradient(
      ellipse,
      #a18cd1 0%,
      #fbc2eb 50%,
      #8ec5fc 100%
    );
  }
  
  .repeating {
    background: repeating-radial-gradient(
      circle,
      #e66465 0px,
      #9198e5 20px,
      #e66465 40px
    );
  }
</style>

<div class="example basic-circle"></div>
<div class="example custom-size"></div>
<div class="example multiple-colors"></div>
<div class="example repeating"></div>

通过组合不同的形状、大小、位置和颜色断点，radial-gradient() 可以创建出丰富多样的视觉效果，从简单的背景到复杂的图案都能轻松实现。