什么是 CSS repeating-linear-gradient() 函数？
在 CSS 的渐变系统中，repeating-linear-gradient() 函数是一个非常实用的工具，尤其适合制作重复的条纹、网格、波浪等视觉效果。它与 linear-gradient() 的核心区别在于：前者会自动重复绘制渐变，而后者只绘制一次。
你可以把 repeating-linear-gradient() 想象成一个“自动画笔”——你设定好一段渐变样式，然后它会按照你指定的间隔，不断重复画下去，直到填满整个容器。这种特性让开发者能用极简代码实现复杂的视觉纹理，而不需要借助图片或复杂的结构。
这个函数的语法结构如下：
repeating-linear-gradient(
[ <angle> | <side-or-corner> ]?,
<color-stop> [ , <color-stop> ]+
)
其中，<angle> 表示渐变的方向（如 45deg），<side-or-corner> 是预设方向关键词（如 top left），而 <color-stop> 是颜色停止点，用于定义渐变的颜色变化过程。
语法结构详解：理解参数的含义
要掌握 repeating-linear-gradient()，首先要弄清它的参数顺序和含义。我们以一个基础示例来拆解：
.repeating-stripes {
background: repeating-linear-gradient(
45deg, /* 渐变方向：45度斜向 */
#ff6b6b, /* 起始颜色：红色 */
#ff6b6b 10px, /* 红色持续 10px */
#4ecdc4 10px, /* 接着切换为青色，从 10px 开始 */
#4ecdc4 20px /* 青色持续 10px，到 20px 结束 */
);
}
这段代码的含义是：从左上到右下画一条 45 度的斜线，每 20px 为一个周期，其中前 10px 是红色，后 10px 是青色，然后重复这个模式。
关键点：
10px和20px是“颜色停止点”的位置，它们决定了每种颜色的宽度。只要颜色停止点之间的距离一致，就能形成规则的条纹。
注意：方向参数可以省略，默认为从上到下（0deg）。如果你不指定角度或关键词，系统会自动以垂直方向开始。
制作经典条纹背景：从基础到进阶
我们来做一个常见的应用场景：制作网页中常用的条纹背景。这种效果在卡片、按钮、导航栏中非常常见。
基础水平条纹
.horizontal-stripes {
width: 100%;
height: 100px;
background: repeating-linear-gradient(
0deg, /* 从上到下垂直方向 */
#f0f0f0, /* 白色 */
#f0f0f0 10px, /* 白色占 10px */
#e0e0e0 10px, /* 灰色从 10px 开始 */
#e0e0e0 20px /* 灰色占 10px，形成 20px 一个周期 */
);
}
这个效果就像一条条细密的水平线，每 20px 重复一次。适合用于强调分隔区域。
垂直条纹与斜向条纹
.vertical-stripes {
width: 100%;
height: 100px;
background: repeating-linear-gradient(
90deg, /* 垂直方向 */
#ffcc00, /* 黄色 */
#ffcc00 10px, /* 黄色占 10px */
#ff9900 10px, /* 橙色从 10px 开始 */
#ff9900 20px /* 橙色占 10px */
);
}
.diagonal-stripes {
width: 100%;
height: 100px;
background: repeating-linear-gradient(
45deg, /* 45度斜线 */
#0077cc, /* 蓝色 */
#0077cc 15px, /* 蓝色占 15px */
#3399cc 15px, /* 浅蓝从 15px 开始 */
#3399cc 30px /* 浅蓝占 15px */
);
}
通过调整角度和颜色停止点，你可以轻松控制条纹的方向和密度。角度值每增加 1deg，条纹就会更“倾斜”一点，就像画一条越来越斜的线。
实际应用案例：模拟网格与波浪效果
模拟网格背景
我们用 repeating-linear-gradient() 模拟一个简单的 2D 网格。这在设计 UI 时特别有用。
.grid-background {
width: 100%;
height: 100px;
background: repeating-linear-gradient(
0deg, /* 水平线 */
#ddd 0,
#ddd 1px, /* 1px 宽的横线 */
transparent 1px,
transparent 2px
),
repeating-linear-gradient(
90deg, /* 垂直线 */
#ddd 0,
#ddd 1px,
transparent 1px,
transparent 2px
);
}
这段代码同时使用了两个 repeating-linear-gradient()，一个画水平线，一个画垂直线。它们叠加在一起，就形成了网格效果。transparent 用于“留白”，让线条之间有空隙。
模拟波浪形背景
我们来做一个常见的“波浪”效果，常用于页脚或卡片底部。
.wave-background {
width: 100%;
height: 100px;
background: repeating-linear-gradient(
180deg, /* 从下往上画 */
#667eea 0,
#667eea 10px, /* 10px 高的蓝色 */
#764ba2 10px, /* 深紫色从 10px 开始 */
#764ba2 20px /* 深紫色占 10px */
);
background-size: 100% 40px; /* 控制波浪的“高度”和重复频率 */
}
这里的 background-size: 100% 40px 是关键——它让渐变在垂直方向上被拉伸到 40px 高，从而形成波浪的起伏感。你可以通过调整这个值来控制波浪的“幅度”。
常见误区与调试技巧
在使用 repeating-linear-gradient() 时，初学者常犯几个错误：
1. 忘记设置颜色停止点的位置
/* ❌ 错误写法 */
background: repeating-linear-gradient(45deg, red, blue);
/* ✅ 正确写法 */
background: repeating-linear-gradient(45deg, red 0, red 10px, blue 10px, blue 20px);
如果不指定位置，浏览器无法判断每种颜色的宽度，最终可能显示为单一颜色或不规则图案。
2. 误以为 repeating-linear-gradient() 会自动填充容器
实际上，它只在背景区域“重复绘制”，不会自动拉伸到容器外。如果容器太小，可能会出现“断断续续”的效果。解决方法是使用 background-size 控制重复的间距。
3. 与 linear-gradient() 混淆
linear-gradient() 画一次渐变，而 repeating-linear-gradient() 会自动复制。记住：“repeating” = “重复”，它就是为“重复性图案”设计的。
性能与兼容性：值得使用的理由
repeating-linear-gradient() 是 CSS 的原生功能，无需额外 JavaScript 或图片资源。它的性能极佳，尤其是在移动端。
目前，所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持该函数。在旧版浏览器（如 IE 11）中，部分支持受限，但可以通过 CSS 前缀或降级方案处理。
相比使用 background-image 引入 PNG 图片，repeating-linear-gradient() 更轻量，加载更快，且能响应式缩放，是现代网页设计中推荐的渐变实现方式。
总结：掌握 CSS repeating-linear-gradient() 函数的核心价值
通过本文的学习，你应该已经理解了 repeating-linear-gradient() 函数的原理和使用方法。它不是简单的“渐变”工具，而是能帮你快速实现条纹、网格、波浪等复杂视觉效果的“设计加速器”。
它的优势在于：
- 代码简洁，无需图片
- 可响应式，适配不同屏幕
- 性能优秀，加载快
- 支持多种颜色与方向组合
无论是制作卡片背景、导航栏分隔线，还是模拟真实纹理，这个函数都能派上大用场。建议你在日常开发中多尝试，甚至可以建立一个“渐变样式库”，积累常用模式，提升开发效率。
下次当你看到一个漂亮的条纹背景时，不妨想想：它背后可能就藏着一行 repeating-linear-gradient() 代码。