Fonction repeating-linear-gradient() de CSS

Page précédente Fonction repeating-conic-gradient() CSS
Page suivante Fonction repeating-radial-gradient() CSS
Retour au niveau supérieur Manuel de fonctions CSS

Définition et utilisation

CSS repeating-linear-gradient() La fonction est utilisée pour la répétition de dégradé linéaire.

Exemple :

dégradé linéaire	répétition de dégradé linéaire

linear-gradient(red, yellow, blue);	repeating-linear-gradient(red, yellow 10%, blue 20%);

实例

Exemple 1

Un dégradé linéaire répété :

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

Essayez-le vous-même

Exemple 2

Différents dégradés linéaires répétés :

#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%);
}

Essayez-le vous-même

Syntaxe CSS

repeating-linear-gradient(angle à side-or-corner, color-stop1, color-stop2, ...);

Valeur	Description
angle	Définir l'angle de direction du dégradé. De 0deg à 360deg. La valeur par défaut est 180deg.
side-or-corner	Définir la position de départ de la ligne de dégradé. Il se compose de deux mots-clés : le premier représente la direction horizontale (left ou right), le second représente la direction verticale (top ou bottom). L'ordre n'a pas d'importance et chaque mot-clé est optionnel.
color-stop1, color-stop2,...	Les points de fin de couleur sont les couleurs que vous souhaitez présenter entre elles avec une transition en douceur. Cette valeur est composée de valeurs de couleur et d'une ou deux positions d'arrêt optionnelles (pourcentage entre 0% et 100% ou longueur le long de l'axe de dégradé).

Valeur

Description

angle

Définir l'angle de direction du dégradé. De 0deg à 360deg. La valeur par défaut est 180deg.

side-or-corner

Définir la position de départ de la ligne de dégradé.

Il se compose de deux mots-clés : le premier représente la direction horizontale (left ou right), le second représente la direction verticale (top ou bottom).

L'ordre n'a pas d'importance et chaque mot-clé est optionnel.

color-stop1, color-stop2,...

Les points de fin de couleur sont les couleurs que vous souhaitez présenter entre elles avec une transition en douceur.

Cette valeur est composée de valeurs de couleur et d'une ou deux positions d'arrêt optionnelles (pourcentage entre 0% et 100% ou longueur le long de l'axe de dégradé).