Funksjonen repeating-radial-gradient

Funksjonen repeating-radial-gradient setter en repeterende radiell gradient. Dette betyr at vi setter et bestemt mønster for gradienten, for eksempel fra 0px til 10px - gradient fra rød til lyseblå, og denne gradienten vil repeteres over hele blokken: 0px til 10px, fra 10px til 20px, fra 20px til 30px og så videre.

Funksjonen arbeider med de samme parameterne som radial-gradient, forskjellen er bare i repetisjonseffekten. Se de aksepterte parameterne i beskrivelsen av radial-gradient.

Syntaks

cssvelger {
  background: repeating-radial-gradient([form type posisjon], farge1 størrelse1, farge2 størrelse2...);
}

Eksempel

Konsentriske sirkler:

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

Результат:

Eksempel

Konsentriske ellipser:

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

Результат:

Eksempel

Plasserer de konsentriske sirkler ikke i sentrum, men i kanten:

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

Результат:

Se også