使用
repeating-linear-gradient()可以创建重复的线性渐变，从而轻松实现条纹效果。它允许你定义一个渐变模式，然后该模式会在元素上重复，直到填满整个背景。
解决方案：
要创建一个条纹背景，你需要定义至少两种颜色，并指定它们的起始和结束位置。
repeating-linear-gradient()函数会重复这些颜色和位置，从而形成条纹。
例如，以下 CSS 代码将创建一个蓝白条纹背景：
立即学习“前端免费学习笔记（深入）”；
.striped-background {
background: repeating-linear-gradient(
45deg,
#3498db,
#3498db 10px,
white 10px,
white 20px
);
}在这个例子中：
45deg
定义了渐变的方向。#3498db
是第一种颜色（蓝色）。#3498db 10px
指定蓝色在 10px 处结束。white 10px
指定白色从 10px 开始。white 20px
指定白色在 20px 处结束。
因此，这个渐变模式是 10px 的蓝色条纹，然后是 10px 的白色条纹，并重复这个模式。
如何调整条纹的宽度和颜色？
调整条纹的宽度非常简单，只需修改颜色停止点的值即可。例如，要创建更宽的条纹，你可以将 10px 和 20px 更改为更大的值，例如 20px 和 40px。
颜色的更改也很直接，只需修改颜色代码（如
#3498db和
white）即可。你可以使用任何有效的 CSS 颜色值，例如十六进制代码、RGB 值或颜色名称。
.wider-striped-background {
background: repeating-linear-gradient(
45deg,
#2ecc71,
#2ecc71 20px,
#f1c40f 20px,
#f1c40f 40px
);
}这个例子创建了绿色和黄色条纹，并且条纹宽度是 20px。
如何创建垂直或水平条纹？
要创建垂直条纹，可以将渐变角度设置为
0deg或
180deg。要创建水平条纹，可以将渐变角度设置为
90deg或
270deg。
例如，以下 CSS 代码将创建一个垂直条纹背景：
.vertical-striped-background {
background: repeating-linear-gradient(
0deg,
#e74c3c,
#e74c3c 20px,
#ecf0f1 20px,
#ecf0f1 40px
);
}这个例子创建了红色和浅灰色垂直条纹。
如何使用多个颜色创建更复杂的条纹图案？
repeating-linear-gradient()不仅限于两种颜色。你可以使用多个颜色来创建更复杂的条纹图案。只需添加更多的颜色停止点即可。
例如：
.complex-striped-background {
background: repeating-linear-gradient(
45deg,
#9b59b6,
#9b59b6 10px,
#34495e 10px,
#34495e 20px,
#e67e22 20px,
#e67e22 30px
);
}这个例子创建了一个包含紫色、深蓝色和橙色的条纹图案。注意，颜色的顺序和停止点的位置会影响最终的效果。可以进行实验，找到最适合你需求的组合。 实际上，稍微调整角度，可以获得意想不到的效果，比如类似编织的纹理。
如何避免条纹边缘出现锯齿？
在某些情况下，尤其是在低分辨率屏幕上，条纹边缘可能会出现锯齿。这可以通过使用
background-size属性来解决。
例如，如果你的条纹图案的宽度是 20px，你可以将
background-size设置为 40px（条纹宽度的两倍）。这会使浏览器以更高的分辨率渲染渐变，从而减少锯齿。
.anti-aliased-striped-background {
background: repeating-linear-gradient(
45deg,
#f39c12,
#f39c12 10px,
#bdc3c7 10px,
#bdc3c7 20px
);
background-size: 40px 40px; /* 设置为条纹宽度的两倍 */
}当然，这可能会轻微地影响性能，但通常是可以接受的。另一个选择是尝试不同的渐变角度，有时可以减少锯齿的可见性。
