简介
repeating-linear-gradient() 函数是一个 CSS 函数，它创建一个重复的线性渐变。它接受一系列颜色停止和一个角度参数，并创建一个在指定角度重复的渐变。
语法
repeating-linear-gradient(angle, color-stop1, color-stop2, ...);
其中：
angle是渐变的角度，可以是任何有效的角度单位，如deg、rad或grad。color-stop1,color-stop2, ... 是渐变的色标。它们可以是任何有效的 CSS 颜色值，如十六进制值、RGB 值或颜色名称。
用法
repeating-linear-gradient() 函数可以用于创建各种效果，例如条纹、格子或波浪。它可以应用于任何 CSS 属性，如 background-image 或 border-image。
要创建一个重复的线性渐变，请使用以下步骤：
- 指定渐变的角度。
- 添加一个或多个色标。
- 将
repeating-linear-gradient()函数分配给 CSS 属性。
示例
创建水平条纹
background-image: repeating-linear-gradient(90deg, #f0f0f0, #e0e0e0);
这将创建一个水平条纹背景，其中白色和浅灰色条纹交替出现。
创建垂直条纹
background-image: repeating-linear-gradient(0deg, #f0f0f0, #e0e0e0);
这将创建一个垂直条纹背景，其中白色和浅灰色条纹交替出现。
创建对角线条纹
background-image: repeating-linear-gradient(45deg, #f0f0f0, #e0e0e0);
这将创建一个对角线条纹背景，其中白色和浅灰色条纹交替出现。
创建波浪
-- -------------------- ---- ------- ----------------- -------------------------- ------ ------- --- ------- ---- ------- ---- ------- ---- ------- ---- ------- ---- ------- ---- ------- ---- --展开代码
这将创建一个波浪背景，其中蓝色和白色波浪交替出现。
浏览器支持
repeating-linear-gradient() 函数在所有现代浏览器中都得到广泛支持，包括：
- Chrome
- Firefox
- Safari
- Edge
- Opera
替代方案
在不支持 repeating-linear-gradient() 函数的较旧浏览器中，可以使用 linear-gradient() 函数创建类似的效果。但是，linear-gradient() 函数不会重复渐变，因此需要使用多个渐变来创建重复效果。
