Función repeating-linear-gradient() de CSS

Definición y uso

CSS repeating-linear-gradient() La función se utiliza para la repetición de gradiente lineal.

Ejemplo:

gradiente lineal repetición de gradiente lineal
linear-gradient(red, yellow, blue); repeating-linear-gradient(red, yellow 10%, blue 20%);

实例

Ejemplo 1

Un gradiente lineal repetitivo:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Prueba tu mismo

Ejemplo 2

Diferentes gradientes lineales repetitivos:

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

Prueba tu mismo

Sintaxis CSS

repeating-linear-gradient(angle | a side-or-corner, color-stop1, color-stop2, ...);
Valor Descripción
angle Define el ángulo de dirección del desgradado. De 0deg a 360deg. El valor predeterminado es 180deg.
side-or-corner

Define la ubicación de inicio de la línea de desgradación.

Se compone de dos claves: la primera representa la dirección horizontal (left o right), la segunda representa la dirección vertical (top o bottom).

El orden no importa y cada clave es opcional.
color-stop1, color-stop2,...

Los puntos de finalización de color son los colores que desea que se presenten entre ellos con una transición suave.

Este valor se compone de valores de color y uno o dos puntos de parada opcionales (porcentaje entre 0% y 100% o longitud a lo largo del eje de desgradación).

Detalles técnicos

Versión: Módulo de imágenes CSS Nivel 3

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que primero admite esta función.

Chrome Edge Firefox Safari Opera
repeating-linear-gradient()
26 10 16 6.1 12.1
Dos puntos de finalización de color en dos ubicaciones
71 79 64 12.1 58

Páginas relacionadas

Tutoriales:Gradiente CSS

Referencia:Atributo background-image CSS

Referencia:Función CSS conic-gradient()

Referencia:Función CSS linear-gradient()

Referencia:Función CSS radial-gradient()

Referencia:Función repeating-conic-gradient() de CSS

Referencia:Función repeating-radial-gradient() de CSS