CSS repeating-linear-gradient() 函数（手把手讲解）

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

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

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

在网页设计中，渐变效果是增强视觉层次感和艺术表现力的重要工具。而 CSS repeating-linear-gradient() 函数作为 CSS 渐变家族的成员之一，能够通过简洁的语法实现重复的线性渐变图案。无论是创建条纹、波纹，还是复杂的纹理背景，这一函数都能帮助开发者高效达成目标。本文将从基础概念、参数解析到实际案例，深入浅出地讲解 repeating-linear-gradient() 的使用方法，并通过形象的比喻和代码示例，帮助读者快速掌握这一工具。

一、基础语法与核心概念

1.1 渐变的基础：从线性渐变到重复渐变

线性渐变（linear-gradient()）是 CSS 渐变中最常见的形式，它沿着一条直线方向实现颜色的平滑过渡。例如，以下代码可以创建一个从左到右的蓝色到白色的渐变：

.linear-gradient {  
  background: linear-gradient(to right, blue, white);  
}

而 repeating-linear-gradient() 函数则在此基础上增加了“重复”的特性。它通过无限重复渐变的色标，形成周期性的图案。例如，相同的颜色参数输入到重复渐变中，会生成一条无限延伸的条纹：

.repeating-gradient {  
  background: repeating-linear-gradient(to right, blue, white, blue 20px);  
}

比喻理解：可以将普通线性渐变想象成一条彩虹，而重复线性渐变则是将这条彩虹无限复制、拼接，最终形成一条连续的彩虹带。

1.2 函数语法结构

repeating-linear-gradient() 的基本语法如下：

repeating-linear-gradient(  
  <angle-or-direction>?,  
  <color-stop-1>,  
  <color-stop-2>,  
  ...  
);

• 方向参数：定义渐变的起始方向（如 to right 或 45deg）。
• 颜色参数：至少需要两个颜色色标（color-stop），函数会自动重复这两个色标之间的渐变。

关键点：与普通线性渐变不同，重复渐变的色标数量必须为偶数。例如，若提供三个颜色，函数会将最后一个颜色视为重复的起始点，导致渐变效果可能不符合预期。

二、参数详解与效果控制

2.1 方向参数：定义渐变的“路径”

方向参数决定了渐变的起始角度或方向。常见的方向包括：
| 参数值 | 描述 |
|-----------------|--------------------------|
| to top | 从下至上渐变（默认值） |
| to bottom | 从上至下渐变 |
| to left | 从右至左渐变 |
| to right | 从左至右渐变 |
| 45deg | 以 45 度角方向渐变 |

比喻理解：想象你站在一个十字路口，方向参数就是决定你朝哪个方向“奔跑”的指南针。例如，to right 表示你向右方移动，而 45deg 则是向东北方向前进。

2.2 颜色参数：构建渐变的“色谱”

颜色参数由多个 color-stop 组成，每个 color-stop 可以是纯色或带有位置的色标。例如：

repeating-linear-gradient(  
  to right,  
  red 0%,  
  blue 50%,  
  red 100%  
);

• 位置值：通过百分比或像素值指定颜色变化的位置（如 50%）。
• 隐式重复：函数会将最后一个颜色与第一个颜色的色标自动连接，形成循环。

注意：若未指定位置，则颜色会在渐变长度的均匀间隔处分布。例如，repeating-linear-gradient(red, white, blue) 会自动分配位置，导致颜色过渡可能不连贯。

2.3 重复模式的“节奏”控制

通过调整颜色参数的位置，可以控制重复图案的密度。例如：

/* 密集的条纹 */  
.repeating-stripe {  
  background: repeating-linear-gradient(  
    to right,  
    black 0%,  
    white 5%,  
    black 10%  
  );  
}  

在此示例中，5% 和 10% 的位置差决定了条纹的宽度（5%），从而形成密集的黑白条纹。

三、实际案例与代码示例

3.1 案例 1：创建动态条纹背景

目标：设计一个水平方向的彩色条纹背景，颜色在红、蓝、绿之间循环。

.dynamic-stripes {  
  background: repeating-linear-gradient(  
    to right,  
    red,  
    red 20px,  
    blue 20px,  
    blue 40px,  
    green 40px,  
    green 60px  
  );  
  height: 200px;  
  width: 100%;  
}  

效果解析：

• 每个颜色占据 20px 的固定宽度（如 red 从 0px 到 20px）。
• 函数自动将绿色的 60px 与下一个循环的红色 0px 连接，形成无限循环。

3.2 案例 2：模拟波纹效果

目标：创建类似水波纹的放射性渐变背景。

.ripple-effect {  
  background: repeating-linear-gradient(  
    45deg,  
    transparent,  
    transparent 15px,  
    rgba(0, 0, 0, 0.1) 15px,  
    rgba(0, 0, 0, 0.1) 30px  
  );  
  height: 400px;  
  width: 400px;  
}  

技巧：

• 使用 45deg 方向和透明色（transparent）与半透明黑色（rgba）交替，形成波纹的明暗交替效果。
• 通过调整 15px 和 30px 的间隔，控制波纹的疏密程度。

3.3 案例 3：结合动画的动态背景

目标：让条纹随鼠标移动而旋转。

.rotating-gradient {  
  background: repeating-linear-gradient(  
    var(--angle, 0deg),  
    cyan,  
    cyan 15px,  
    magenta 15px,  
    magenta 30px  
  );  
  height: 300px;  
  width: 300px;  
  transition: background 0.5s ease;  
}  

document.querySelector('.rotating-gradient').addEventListener('mousemove', (e) => {  
  const angle = Math.atan2(e.movementY, e.movementX) * (180 / Math.PI);  
  e.target.style.setProperty('--angle', `${angle}deg`);  
});  

效果：鼠标移动时，--angle 变量动态改变渐变方向，实现旋转的条纹效果。

四、进阶技巧与常见问题

4.1 技巧 1：与 transform 结合

通过 transform: rotate() 可以在不改变渐变方向参数的情况下，调整图案的倾斜角度。例如：

.tilted-pattern {  
  background: repeating-linear-gradient(  
    to bottom,  
    #ff0000,  
    #ff0000 10px,  
    #00ff00 10px,  
    #00ff00 20px  
  );  
  transform: rotate(30deg);  
}  

此方法适合需要动态调整角度的场景，避免频繁修改 CSS 属性。

4.2 技巧 2：创建多层渐变

通过叠加多个 repeating-linear-gradient()，可以实现复杂纹理。例如：

.complex-pattern {  
  background:  
    repeating-linear-gradient(  
      45deg,  
      #f00, #f00 10px, transparent 10px, transparent 20px  
    ),  
    repeating-linear-gradient(  
      135deg,  
      #0f0, #0f0 10px, transparent 10px, transparent 20px  
    );  
}  

此代码会生成交叉的红色和绿色条纹，形成棋盘格纹理。

4.3 常见问题解答

Q1：为什么渐变方向看起来不正确？

• 检查方向参数是否与预期一致。例如，to right 表示从左向右渐变，而非从右向左。
• 使用 calc() 或 var() 动态计算角度时，确保单位正确（如 deg）。

Q2：颜色过渡不连续，出现断层怎么办？

• 确保最后一个颜色的终点位置与下一个循环的起点一致。例如，若最后一个色标是 blue 100%，则下一个循环的起始色标应为 blue 0%。
• 使用百分比时，避免因计算误差导致断层，可改用固定像素值。

五、总结与学习建议

repeating-linear-gradient() 函数凭借其简洁的语法和强大的重复能力，成为 CSS 渐变设计中的“瑞士军刀”。通过掌握方向控制、颜色参数分配以及动画结合技巧，开发者可以轻松实现从基础条纹到复杂纹理的多样化效果。

对于初学者，建议从简单案例入手，逐步尝试调整参数观察变化；中级开发者则可探索与 CSS 变量、动画的结合，甚至通过 JavaScript 实现动态交互效果。记住，渐变设计的核心在于对“重复节奏”的把控——就像音乐中的节拍，精准的参数设置能让你的作品在视觉上“律动”起来。

通过本文的讲解，希望读者不仅能理解 repeating-linear-gradient() 的技术细节，更能将其灵活运用于实际项目中，为网页设计注入更多创意与活力。