CSS repeating-radial-gradient() funktion

Definition och användning

CSS repeating-radial-gradient() Funktioner används för att upprepa radialgradient.

Radialgradient	Upprepålad radialgradient

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

En upprepålad radialgradient:

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

En annan upprepande radial gradation, som har ställts in storlek och form:

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

En annan upprepande radial gradation, som har två färgändringar:

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

Värde	Beskrivning
shape	Definiera formen för gradationen. Möjliga värden: ellipse (standard) circle
size	Definiera storleken på gradationen. Möjliga värden: farthest-corner (standard) closest-side closest-corner farthest-side
at position	Definiera positionen för gradationen. Standardvärdet är "center".
start-color, ... , last-color	Färgändringar är de färger du vill visa en smidig övergång mellan. Värdet består av färgvärden och ett eller två valfria stoppplatser (procentandel mellan 0% och 100% eller längd längs gradationsaxeln).