repeating-linear-gradient()通过定义重复单元实现无限平铺的渐变效果，如条纹、虚线、点阵等；结合多层渐变、动画、背景固定和CSS变量可创造复杂动态背景，提升视觉表现与可维护性。
repeating-linear-gradient()是CSS中一个非常强大的函数，它能让你定义一个线性渐变模式，然后这个模式会沿着指定方向无限重复，从而在不增加图片资源的情况下，为网页元素创造出各种独特的、富有节奏感的背景效果。它本质上就是把一个基础的线性渐变“平铺”开来，让你可以用纯CSS实现原本需要图片才能完成的复杂背景设计。
解决方案
要使用
repeating-linear-gradient()，核心在于理解它如何定义一个“重复单元”。它的语法和
linear-gradient()非常相似，但关键在于你设置的颜色停止点（color stops）会决定这个重复单元的长度。
一个基础的
repeating-linear-gradient()看起来是这样的：
background: repeating-linear-gradient(direction, color1 stop1, color2 stop2, ...);
这里的
direction可以是角度（如
45deg）或关键字（如
to right）。而
color1 stop1, color2 stop2等则是定义了渐变的颜色和它们在渐变线上的位置。
关键在于重复机制：
repeating-linear-gradient()会取你定义的最后一个色标（或如果未明确定义，则为最后一个颜色在100%位置）到第一个色标（或0%位置）之间的渐变段，然后无限次地重复这个段。为了创建清晰的重复图案，比如条纹，你通常需要让颜色在某个点“突然”切换，而不是平滑过渡。
立即学习“前端免费学习笔记（深入）”；
举个例子，创建一个简单的红蓝条纹：
.striped-background {
background: repeating-linear-gradient(
45deg, /* 渐变方向为45度 */
#ff6b6b, /* 红色开始 */
#ff6b6b 10px, /* 红色持续到10px */
#4ecdc4, /* 蓝色从10px开始 */
#4ecdc4 20px /* 蓝色持续到20px */
);
width: 100%;
height: 200px;
}在这个例子中，
#ff6b6b 10px和
#4ecdc4 10px意味着在10px这个位置，颜色从红色瞬间切换到蓝色。然后
#4ecdc4 20px定义了蓝色持续到20px。所以，一个完整的重复单元是20px，其中前10px是红色，后10px是蓝色。整个渐变会以45度角，每20px重复一次红蓝相间的条纹。我个人觉得，它最妙的地方就在于，你只需要定义好一个“单元格”，它就能帮你自动铺满，省去了很多图片切图的麻烦，而且是纯CSS，缩放起来也毫无压力。
使用repeating-linear-gradient()
能做出哪些让人眼前一亮的背景效果？
repeating-linear-gradient()的魅力在于它的灵活性，能让你用最少的代码实现各种视觉效果。
1. 经典的条纹背景： 这是最基础也是最常用的场景。无论是水平、垂直还是斜向条纹，都能轻松实现。通过调整角度和色标长度，你可以控制条纹的粗细和方向。
/* 垂直条纹 */
.vertical-stripes {
background: repeating-linear-gradient(to right, #f0f0f0, #f0f0f0 15px, #e0e0e0 15px, #e0e0e0 30px);
height: 150px;
}
/* 细斜纹 */
.thin-diagonal-stripes {
background: repeating-linear-gradient(135deg, #eee, #eee 3px, #ccc 3px, #ccc 6px);
height: 150px;
}2. 虚线或点状图案： 通过巧妙地结合透明色，你可以模拟出虚线、点阵甚至网格效果。这种方法比用图片做虚线更灵活，因为你可以随时调整虚线的间距和颜色。
/* 水平虚线 */
.dashed-line {
background: repeating-linear-gradient(to right, transparent, transparent 10px, #aaa 10px, #aaa 12px);
height: 50px;
}
/* 简单的点阵（需要多层渐变） */
.dot-pattern {
background-color: #f8f8f8;
background-image:
repeating-linear-gradient(0deg, #ccc, #ccc 1px, transparent 1px, transparent 20px),
repeating-linear-gradient(90deg, #ccc, #ccc 1px, transparent 1px, transparent 20px);
background-size: 20px 20px; /* 控制点阵的密度 */
height: 200px;
}你看，通过两层渐变，我们就能在视觉上模拟出网格，是不是挺有意思的？
3. 几何图案和纹理： 这需要一点创意和对色标的精确控制。比如，可以创造出锯齿状、波浪线，甚至是某种编织纹理。
/* 锯齿边框效果 */
.sawtooth-edge {
background: repeating-linear-gradient(-45deg, #fff, #fff 5px, #000 5px, #000 10px);
height: 30px;
width: 100%;
}有时候，你会发现一些意想不到的颜色和角度组合能带来惊喜，这完全取决于你的想象力。
在使用repeating-linear-gradient()
时，有哪些值得注意的技巧和常见误区？
虽然
repeating-linear-gradient()功能强大，但在实际应用中，也有一些小细节和坑需要注意。
1. 色标的精确控制是关键，避免模糊重复：
repeating-linear-gradient()的“重复”机制，很大程度上取决于你如何设置色标。一个常见的误区是像
linear-gradient()一样只设置起点和终点颜色，而不明确定义重复单元的长度，例如
background: repeating-linear-gradient(red, blue);。这样会导致一个从红到蓝的平滑渐变不断重复，通常不是你想要的效果。 技巧： 始终明确定义每个颜色在重复单元中的起止位置。例如，
red 0px, red 10px, blue 10px, blue 20px清晰地定义了一个20px的重复单元，其中前10px是红色，后10px是蓝色，颜色在10px处瞬间切换。
2. 透明度的妙用，创造层次感： 结合
rgba()或
hsla()的透明度，可以创建出叠加、镂空或半透明的效果，让背景更有层次感。比如，制作一个半透明的网格叠加在图片上，或者制作一个渐变虚线。
.transparent-overlay {
background: repeating-linear-gradient(
45deg,
rgba(0,0,0,0.1) 0,
rgba(0,0,0,0.1) 5px,
transparent 5px,
transparent 10px
);
background-color: lightblue; /* 作为底层颜色 */
height: 150px;
}这种方式能让你的设计看起来更精致，不那么“死板”。
3. 与background-size
结合，控制重复单元的实际大小：
虽然
repeating-linear-gradient()本身会重复，但如果你想控制重复单元的实际大小，或者想让它在特定区域内重复，
background-size属性就派上用场了。当你定义了一个小型的重复图案，但希望它在更大的区域内以特定尺寸平铺时，
background-size能给你更精细的控制。
.custom-sized-pattern {
background: repeating-linear-gradient(45deg, #f0f, #f0f 5px, #0ff 5px, #0ff 10px);
background-size: 40px 40px; /* 将20px的重复单元放大到40px */
height: 200px;
}4. 性能考量： 纯CSS渐变通常比图片性能好，但在非常复杂的重复渐变中，浏览器渲染也需要计算。过度复杂的渐变层可能会影响性能，尤其是在旧设备上。我遇到过一些同事，为了追求极致的视觉效果，叠加了七八层渐变，结果在手机上就有点卡顿。所以，适度很重要，在追求美观的同时，也要兼顾用户体验。
除了基础用法，如何将repeating-linear-gradient()
与其他CSS特性巧妙结合，创造更高级的视觉效果？
repeating-linear-gradient()本身已经很强大了，但当它与其他CSS属性“联姻”时，能迸发出更多令人惊叹的火花。
1. 多层渐变叠加，创造复杂图案： 这是最常见的进阶用法。通过在
background属性中定义多个
repeating-linear-gradient()，并用逗号分隔，你可以创建出极其复杂的图案。每一层渐变都可以有自己的角度、颜色、重复单元和背景位置。
.complex-pattern {
background:
repeating-linear-gradient(45deg, #f00 0, #f00 5px, transparent 5px, transparent 10px), /* 第一层：红色斜线 */
repeating-linear-gradient(-45deg, #00f 0, #00f 5px, transparent 5px, transparent 10px), /* 第二层：蓝色斜线 */
#eee; /* 底色 */
background-size: 20px 20px; /* 控制所有渐变的重复单元大小 */
height: 200px;
}这种方式，我经常用来模拟一些材质纹理，比如布料的编织感，或者某种金属拉丝的效果。通过调整不同层渐变的透明度，还能做出更微妙的叠加效果。
2. 与background-attachment: fixed
结合，实现视差背景：
当你的
repeating-linear-gradient()作为背景，并且设置
background-attachment: fixed;时，这个重复渐变会固定在视口中，而内容则在其上方滚动。这可以产生一种简单的视差效果，增加页面的深度感。
body {
background: repeating-linear-gradient(45deg, #f9f9f9, #f9f9f9 10px, #e9e9e9 10px, #e9e9e9 20px);
background-attachment: fixed; /* 背景固定 */
/* 其他内容和高度以触发滚动 */
min-height: 150vh;
}3. 结合动画（@keyframes
）和过渡（transition
），让背景动起来：
虽然渐变本身是静态的，但你可以通过动画或过渡改变其
background-position、
background-size甚至渐变的颜色值，让重复渐变动起来，增加页面的交互性和趣味性。
@keyframes move-stripes {
from { background-position: 0 0; }
to { background-position: 200px 0; } /* 沿着X轴移动200px */
}
.animated-stripes {
background: repeating-linear-gradient(90deg, #ffcc00, #ffcc00 20px, #ff6600 20px, #ff6600 40px);
background-size: 40px 40px; /* 定义重复单元的大小 */
animation: move-stripes 5s linear infinite; /* 5秒线性无限循环动画 */
height: 100px;
}这种动态效果，尤其是在加载动画或者某些交互反馈上，能带来非常棒的用户体验，让页面看起来更有活力。
4. 利用自定义属性（CSS Variables）增强可维护性和灵活性： 将重复渐变中的颜色、大小、角度等参数定义为CSS变量，可以更方便地管理和修改，尤其是在需要主题切换或响应式调整时，非常灵活。
:root {
--stripe-color-a: #a0c4ff;
--stripe-color-b: #bdb2ff;
--stripe-width: 15px;
--stripe-angle: 60deg;
}
.themable-stripes {
background: repeating-linear-gradient(
var(--stripe-angle),
var(--stripe-color-a),
var(--stripe-color-a) var(--stripe-width),
var(--stripe-color-b),
var(--stripe-color-b) calc(var(--stripe-width) * 2)
);
height: 150px;
}
/* 切换主题时，只需修改变量 */
@media (prefers-color-scheme: dark) {
:root {
--stripe-color-a: #3a0ca3;
--stripe-color-b: #4361ee;
}
}这对于维护大型项目或者需要快速迭代设计稿的场景来说，简直是神器，大大提高了开发效率和代码的可读性。
