异常教程

CSS repeating-radial-gradient() 函数（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在网页设计中，渐变效果是增强视觉层次感和艺术表现力的重要工具。CSS 提供的 repeating-radial-gradient() 函数，通过重复生成径向渐变图案，为开发者提供了无限的创意空间。无论是创建动态的星空效果、抽象的几何背景，还是模拟自然纹理，这一函数都能以简洁的代码实现复杂的视觉效果。本文将从基础概念出发，结合实例逐步解析 repeating-radial-gradient() 的使用方法，并探讨其在实际项目中的应用场景。

一、理解径向渐变与重复渐变

1.1 从线性渐变到径向渐变

在深入 repeating-radial-gradient() 之前，我们需要先回顾 CSS 渐变的基础知识。

  • 线性渐变（linear-gradient()）：颜色在一条直线上平滑过渡，例如从左到右或从上到下。
  • 径向渐变（radial-gradient()）：颜色以圆形或椭圆形为中心向外扩散，形成类似“水波纹”或“爆炸”的效果。

径向渐变的核心参数包括：

  • 形状（circle 或 ellipse，默认为 ellipse）
  • 尺寸（如 closest-side、farthest-corner 等）
  • 颜色停止点（定义渐变颜色的位置）

1.2 重复渐变的原理

repeating-radial-gradient() 函数通过无限重复渐变色带，将原本平滑的径向渐变转化为重复的同心圆或椭圆图案。其核心机制是：

  1. 根据定义的颜色间隔生成渐变色带；
  2. 将这些色带以固定间隔重复排列，覆盖整个区域。

类比说明：
想象在一张白纸上用毛笔画同心圆，每次蘸取不同颜色的颜料并重复绘制，最终形成由多层颜色叠加的图案——repeating-radial-gradient() 正是通过这种方式，将简单的渐变转化为复杂的重复图案。

二、repeating-radial-gradient() 的语法与参数详解

2.1 基本语法结构

repeating-radial-gradient(  
  [形状 大小 at 位置,]  
  起始颜色,  
  颜色1 偏移量,  
  颜色2 偏移量,  
  ...  
);

2.2 参数详解

2.2.1 形状与尺寸（Shape & Size）

  • 形状：circle（圆形）或 ellipse（椭圆形，默认值）。
  • 尺寸：通过关键字定义渐变的初始半径，常见选项包括：
    • closest-side：以离中心最近的容器边为半径；
    • farthest-side：以离中心最远的容器边为半径；
    • closest-corner/farthest-corner：以离中心最近/最远的容器对角线为半径。

示例对比：
| 参数值 | 效果描述 |
|-----------------|---------------------------------------|
| closest-side | 渐变刚好触达容器最近的边，不会超出容器 |
| farthest-corner| 渐变覆盖容器对角线，可能超出容器边缘 |

2.2.2 颜色停止点（Color Stops）

颜色停止点定义了渐变色带的过渡位置，格式为 颜色 偏移量。例如：

red 0%, blue 25%, green 50%

表示从中心开始，0% 处为红色，25% 处过渡为蓝色，50% 处变为绿色。

关键规则：

  • 若省略偏移量，系统会自动平均分配颜色间隔；
  • 颜色间隔越小，重复单元越密集。

2.2.3 位置（Position）

通过 at X% Y% 或 at top right 等关键字，可以调整渐变中心的位置，默认为 center（容器中心）。

三、基础案例：创建重复的同心圆图案

3.1 案例 1：简单同心圆背景

.background {  
  width: 300px;  
  height: 300px;  
  background-image: repeating-radial-gradient(  
    circle, /* 圆形形状 */  
    #fff, /* 白色起点 */  
    #000 10px /* 每隔 10px 切换为黑色 */  
  );  
}

效果：

  • 白色和黑色以 10px 为间隔重复，形成密集的同心圆；
  • 因为未指定尺寸，默认使用 ellipse，但圆形形状强制了对称效果。

3.2 案例 2：动态渐变色波纹

.wave-effect {  
  width: 200px;  
  height: 200px;  
  background-image: repeating-radial-gradient(  
    farthest-corner at center, /* 以对角线为半径 */  
    #ff6b6b, /* 橙红色 */  
    transparent 20px, /* 20px 后透明 */  
    #ff6b6b 40px /* 40px 再次变色 */  
  );  
}

效果：

  • 渐变色以对角线为基准重复，形成向外扩散的波纹效果；
  • 通过透明色与实色交替，增强视觉层次。

四、进阶技巧与实际应用

4.1 创造星空效果

通过叠加多个同心圆渐变层，可以模拟星空的深邃感：

.star-sky {  
  background:  
    repeating-radial-gradient(  
      circle at center,  
      #1a1a1a,  
      #1a1a1a 1px,  
      transparent 1px,  
      transparent 9px  
    ),  
    linear-gradient(  
      45deg,  
      #000, #0d0d0d  
    );  
}

技巧说明：

  • 内层 repeating-radial-gradient() 生成密集的白色小点（星星）；
  • 外层 linear-gradient() 作为深色背景，增强对比度。

4.2 结合 CSS 变量实现动态效果

通过 CSS 变量（Custom Properties）可以轻松调整渐变参数，例如：

:root {  
  --color1: #4a90e2;  
  --color2: #ffffff;  
  --radius: 20px;  
}  

.dynamic-gradient {  
  background-image: repeating-radial-gradient(  
    ellipse at var(--position),  
    var(--color1) 0%,  
    var(--color2) var(--radius)  
  );  
}

通过修改 --position 或 --radius，可快速切换渐变方向和密度。

五、常见问题与解决方案

5.1 问题 1：渐变超出容器边界

当渐变尺寸设置为 farthest-corner 时，图案可能超出容器范围。解决方案：

.container {  
  overflow: hidden; /* 隐藏溢出部分 */  
}

5.2 问题 2：颜色过渡不自然

若重复色带显得突兀，可尝试：

  • 减少颜色间隔（如从 20px 调整为 10px）；
  • 使用透明色作为过渡色（例如 rgba(0,0,0,0.5)）。

六、与 radial-gradient() 的对比与互补

6.1 核心差异

特性radial-gradient()repeating-radial-gradient()
渐变模式单次渐变无限重复
适用场景平滑过渡效果复杂图案（如波纹、网格）

6.2 组合使用案例

.combined-effect {  
  background:  
    radial-gradient(circle, #fff, #ddd),  
    repeating-radial-gradient(  
      ellipse 100px at top,  
      transparent,  
      #000 5px  
    );  
}

效果：

  • 底层为单次径向渐变（白色到浅灰）；
  • 上层叠加重复的黑色细线，形成立体感。

结论

CSS repeating-radial-gradient() 函数凭借其重复生成径向图案的能力，成为现代网页设计中不可或缺的工具。从基础的同心圆到复杂的动态效果，开发者可以通过调整形状、尺寸、颜色间隔等参数，创造出既符合功能需求又富有艺术性的视觉效果。掌握这一函数不仅能提升设计表现力，还能通过与 CSS 变量、动画等技术的结合，实现更具交互性和动态感的网页体验。随着 CSS 渐变技术的持续发展，repeating-radial-gradient() 必将在未来的设计实践中发挥更大的作用。

最新发布

查看更多文章