Funksie repeating-radial-gradient

Die funksie repeating-radial-gradient spesifiseer 'n herhalende radiale gradiënt. Dit beteken ons definieer 'n sekere patroon vir die gradiënt, byvoorbeeld, van 0px tot 10px - 'n gradiënt van rooi na blou en hierdie gradiënt sal oor die hele blok herhaal word: 0px tot 10px, van 10px tot 20px, van 20px tot 30px en so aan.

Die funksie werk met dieselfde parameters as radial-gradient, die verskil is slegs in die herhalingseffek. Raadpleeg die parameters wat aanvaar word in die beskrywing van radial-gradient.

Sintaksis

cssselektor {
  background: repeating-radial-gradient([vorm tipe posisie], kleur1 grootte1, kleur2 grootte2...);
}

Voorbeeld

Konsentriese sirkels:

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

Konsentriese ellipses:

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

Plaas die konsentriese sirkels nie in die middel nie, maar aan die kant:

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;
}

Результат:

Sien ook