在 CSS 中，函数 repeating-linear-gradient（） 在创建由重复线性梯度组成的图像时很有用。该函数类似于 linear-gradient（），因为它采用相同的参数，其中颜色停止在所有方向上无限重复，以填充容器。生成的图像是 <gradient> 数据类型的特殊图像。
概述
- 第一个和最后一个色标之间的距离决定了渐变的长度，即重复。
- 当第一个色标未指定色标长度时，它默认为 0。
- 每重复一次，色标的位置都会按基本线性渐变长度的倍数移动。
- 如果色标值不同，则在色标之间可以看到明显的视觉过渡，因为结束色标的位置与起始色标的位置重合。
- 重复线性渐变没有固有尺寸，这意味着图像没有首选的大小或纵横比。
- 图像的大小将与它适用的元素的大小匹配。
- <gradient>数据类型只能在使用 <image> 的地方使用。
- repeating-linear-gradient（） 函数不能与 <color>数据类型和 background-color 等属性一起使用。
可能的值
函数 repeating-linear-gradient（） 可以将以下值作为参数：
1. <side-or-corner>:
- 确定梯度的起点。
- 包含单词 to 和最多两个关键术语，即一个表示水平侧（左侧或右侧），另一个表示垂直侧（顶部或底部）。
- 侧键术语的顺序可以是任何内容。
- 如果未指定任何值，则设置的默认值为 bottom。
- 顶部、底部、左侧和右侧的等效值分别为 0 度、180 度、270 度和 90 度。
- <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;
}
/* A repeating gradient tilted 60 degrees,
with three color stops */
.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;
}
/* A repeating gradient going from the bottom right to the top left */
.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;
}
/* A gradient going from the bottom to top,
starting red, turning yellow after 40%,
and finishing green. This gradient doesn't repeat because
the last color stop defaults to 100% */
.repeat-linear {
background-image: repeating-linear-gradient(0deg, red, yellow 40%, green);
}
</style>
</head>
<body>
<div class="repeat-linear"></div>
</body>
</html>
