Functie repeating-radial-gradient

De functie repeating-radial-gradient definieert een herhalend radiaal verloop. Dit betekent dat we een bepaald patroon van het verloop instellen, bijvoorbeeld van 0px tot 10px - een verloop van rood naar cyaan en dit verloop wordt herhaald over het hele blok: 0px tot 10px, van 10px tot 20px, van 20px tot 30px en zo verder.

De functie werkt met dezelfde parameters als radial-gradient, het enige verschil is het herhalingseffect. Voor de parameters die worden geaccepteerd, zie de beschrijving van radial-gradient.

Syntaxis

cssselector {
  background: repeating-radial-gradient([vorm type positie], kleur1 grootte1, kleur2 grootte2...);
}

Voorbeeld

Concentrische cirkels:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Voorbeeld

Concentrische ellipsen:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

Voorbeeld

Laten we de concentrische cirkels niet in het midden plaatsen, maar aan de zijkant:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Zie ook