完整教程：CSS radial-gradient函数详解

目录

基本语法

关键参数详解

1. 渐变形状（Shape）

2. 渐变大小（Size）

3. 中心点位置（Position）

4. 颜色断点（Color Stops）

常见应用场景

1. 基本圆形渐变

2. 椭圆渐变

3. 模拟光源效果

4. 多色渐变

5. 重复放射性渐变

高级技巧

1. 创建圆形光晕

2. 组合多个渐变

3. 实现 3D 球体效果

注意事项

示例代码

---

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

基本语法

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

.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

.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

.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

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

常见应用场景

1. 基本圆形渐变

css

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

2. 椭圆渐变

css

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

3. 模拟光源效果

css

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

4. 多色渐变

css

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

5. 重复放射性渐变

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

css

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

高级技巧

1. 创建圆形光晕

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

.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

.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);}

注意事项

1. 浏览器兼容性
   所有现代浏览器均支持，IE10+ 需要前缀 -webkit-。

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

3. 回退方案
   建议为不支持渐变的浏览器提供纯色背景：

   css

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

4. 渐变定位与尺寸

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

示例代码

html

预览

  .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    );  }

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