Funzione CSS repeating-radial-gradient()

Definizione e utilizzo

CSS repeating-radial-gradient() La funzione viene utilizzata per creare un'ombreggiatura radiale ripetuta.

Ombreggiatura radiale	Ombreggiatura radiale ripetuta

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

Un'ombreggiatura radiale ripetuta:

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

Un altro gradiente radiale ripetuto, con impostazione della forma, dimensione e posizione:

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

Un altro gradiente radiale ripetuto, con due posizioni di arresto del colore impostate:

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

Valore	Descrizione
shape	Definire la forma del gradiente. Valori possibili: ellipse (predefinito) circle
size	Definire la dimensione del gradiente. Valori possibili: farthest-corner (predefinito) closest-side closest-corner farthest-side
at position	Definire la posizione del gradiente. Il valore predefinito è "center".
start-color, ... , last-color	I punti di terminazione del colore sono i colori che si desidera presentare con una transizione morbida. Questo valore è composto da valori di colore e uno o due posizioni di arresto opzionali (percentuale tra 0% e 100% o lunghezza lungo l'asse del gradiente).