CSS repeating-radial-gradient() functie

Definitie en gebruik

CSS herhalend-radiaal-gradient() De functie wordt gebruikt voor het herhalen van radiaalverlopen.

Radicale verloop	Herhaaldelijke radiaalverloop

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

Een herhaaldelijke radiaalverloop:

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

Een andere herhalende radiaalverloop die vorm, grootte en positie instelt:

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

Een andere herhalende radiaalverloop die twee kleurendpunten instelt:

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

herhalend-radiaal-gradient(vorm grootte at positie, start-color, ... , last-color);

Waarde	Beschrijving
vorm	Definieert de vorm van de verloop. Mogelijke waarden: ellipse (standaard) circle
grootte	Definieert de grootte van de verloop. Mogelijke waarden: farthest-corner (standaard) closest-side closest-corner farthest-side
at positie	Definieert de positie van de verloop. Standaardwaarde is "center".
start-color, ... , last-color	Kleurendpunten zijn de kleuren die u wilt laten overgaan in een soepele overgang. Deze waarde bestaat uit kleurwaarden en een of twee optionele stopposities (percentages tussen 0% en 100% of lengtes langs de verloopas).