在CSS中，函数repeating-linear-gradient()对于创建由重复线性渐变组成的图像非常有用。该函数类似于 linear-gradient()，因为它采用相同的参数，其中颜色停止在所有颜色中无限重复。填充容器的说明。生成的图像是一个特殊图像，具有 <gradient> 数据类型。
概述
第一个和最后一个颜色停止点之间的距离决定重复渐变的长度。
当第一个颜色停止点没有color-stop-length 时指定，默认为 0。
每次重复时，颜色停止点的位置都会移动基本线性渐变长度的倍数。
如果色标值不同，则可以在色标之间看到明显的视觉过渡，因为结束色标的位置与起始色标的位置一致。
重复线性渐变没有固有尺寸，这意味着图像没有首选尺寸或长宽比。
尺寸图像的大小将与其应用的元素的大小相匹配。
<gradient> 数据类型只能在使用 <image> 的地方使用。
重复线性梯度( ) 函数不能与 <color> 数据类型和背景颜色等属性一起使用。
可能的值
函数repeating-linear-gradient()可以有以下值作为参数:
1. <side-or-corner>:
确定渐变的起点。
包含单词 to最多两个关键字，即一个表示水平侧（左或右），另一个表示垂直侧（顶部或底部）。
侧面关键字的顺序可以是任何值。
未指定值时，默认值设置为底部。
与 to 等效的值顶部、底部、左侧和右侧分别为 0deg、180deg、270deg 和 90deg。
<angle> 值按顺时针方向增加。
2. <linear-color-stop>:由颜色停止点的 <color> 值以及一两个可选的停止位置值组成。停止位置值可以是 <percentage> 或 <length> 值。值为0%或0，表示渐变的起点；而100%的值代表当渐变不再重复时图像尺寸的100%。
3. <color-hint>:确定相邻颜色停止点之间的渐变进程。当未指定值时，颜色过渡的中点是两个颜色停止点之间的中点。
语法
repeating-linear-gradient(
angle | to side-or-corner, color-stop1, color-stop2,...); CSS repeating-linear-gradient(): 角度值
倾斜 60 度的重复渐变示例，具有三个色标:
<html>
<head>
<style>
div {
height: 200px;
width: 400px;
}
/* 重复倾斜 60 度的梯度，具有三个色标 */
.repeat-linear {
background-image: repeating-linear-gradient(60deg, red, yellow 7%, black 10%);
}
</style>
</head>
<body>
<h1>Repeating linear gradient</h1>
<div class="repeat-linear"></div>
</body>
</html> CSS repeating-linear-gradient(): 从右下到左上
重复渐变示例从右下角到左上角。
<html>
<head>
<style>
div {
height: 200px;
width: 400px;
}
/* 从右下角到左上角的重复渐变 */
.repeat-linear {
background-image: repeating-linear-gradient(to left top, red, yellow 20px, black 20%);
}
</style>
</head>
<body>
<h1>Repeating linear gradient</h1>
<div class="repeat-linear"></div>
</body>
</html> CSS repeating-linear-gradient(): 不重复
线性渐变示例，其中渐变不作为最后一个重复颜色停止默认为100%:
<html>
<head>
<style>
div {
height: 200px;
width: 400px;
}
/* 从下到上的渐变，
开始为红色，40%后变黄，
并完成绿色。 这个渐变不会重复，因为
最后一个颜色停止点默认为 100%
*/
.repeat-linear {
background-image: repeating-linear-gradient(0deg, red, yellow 40%, green);
}
</style>
</head>
<body>
<div class="repeat-linear"></div>
</body>
</html>