简介

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。

要创建一个重复的线性渐变，请使用以下步骤：

1. 指定渐变的角度。
2. 添加一个或多个色标。
3. 将 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);

这将创建一个对角线条纹背景，其中白色和浅灰色条纹交替出现。

创建波浪

// www.javascriptcn.com code example
background-image: repeating-linear-gradient(
  90deg,
  #0000ff 0%,
  #0000ff 25%,
  #ffffff 25%,
  #ffffff 50%,
  #0000ff 50%,
  #0000ff 75%,
  #ffffff 75%,
  #ffffff 100%
);

这将创建一个波浪背景，其中蓝色和白色波浪交替出现。

浏览器支持

repeating-linear-gradient() 函数在所有现代浏览器中都得到广泛支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

替代方案

在不支持 repeating-linear-gradient() 函数的较旧浏览器中，可以使用 linear-gradient() 函数创建类似的效果。但是，linear-gradient() 函数不会重复渐变，因此需要使用多个渐变来创建重复效果。