CSS 参考手册 目录

CSS repeating-linear-gradient() 函数

简介

repeating-linear-gradient() 函数是一个 CSS 函数,它创建一个重复的线性渐变。它接受一系列颜色停止和一个角度参数,并创建一个在指定角度重复的渐变。

语法

-------------------------------- ------------ ------------ -----

其中:

  • angle 是渐变的角度,可以是任何有效的角度单位,如 degradgrad
  • color-stop1, color-stop2, ... 是渐变的色标。它们可以是任何有效的 CSS 颜色值,如十六进制值、RGB 值或颜色名称。

用法

repeating-linear-gradient() 函数可以用于创建各种效果,例如条纹、格子或波浪。它可以应用于任何 CSS 属性,如 background-imageborder-image

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

  1. 指定渐变的角度。
  2. 添加一个或多个色标。
  3. repeating-linear-gradient() 函数分配给 CSS 属性。

示例

创建水平条纹

----------------- -------------------------------- -------- ---------

这将创建一个水平条纹背景,其中白色和浅灰色条纹交替出现。

创建垂直条纹

----------------- ------------------------------- -------- ---------

这将创建一个垂直条纹背景,其中白色和浅灰色条纹交替出现。

创建对角线条纹

----------------- -------------------------------- -------- ---------

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

创建波浪

----------------- --------------------------
  ------
  ------- ---
  ------- ----
  ------- ----
  ------- ----
  ------- ----
  ------- ----
  ------- ----
  ------- ----
--

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

浏览器支持

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

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Opera

替代方案

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


下一篇:CSS 参考手册