Fonction CSS repeating-radial-gradient()

Définition et utilisation

CSS repeating-radial-gradient() La fonction est utilisée pour le gradient radial répété.

Gradient radial	Gradient radial répété

radial-gradient(red, yellow, green);	repeating-radial-gradient(red, yellow 10%, green 15%);

Un gradient radial répété :

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

Un autre dégradé radial répété, avec la forme, la taille et la position définies :

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

Un autre dégradé radial répété, avec deux points de fin de couleur définis :

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

repeating-radial-gradient(shape size at position, start-color, ... , last-color);

Valeur	Description
shape	Définir la forme du dégradé. Les valeurs possibles sont : ellipse (par défaut) circle
size	Définir la taille du dégradé. Les valeurs possibles sont : farthest-corner (par défaut) closest-side closest-corner farthest-side
at position	Définir la position du dégradé. La valeur par défaut est "center".
start-color, ... , last-color	Les points de fin de couleur définissent les couleurs entre lesquelles vous souhaitez que s'effectue 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 du dégradé).