Funktionen repeating-radial-gradient

Funktionen repeating-radial-gradient angiver en gentagende radial gradient. Det betyder, at vi angiver et bestemt mønster for gradienten, for eksempel fra 0px til 10px - gradient fra rød til lyseblå, og denne gradient vil gentage sig over hele blokken: 0px til 10px, fra 10px til 20px, fra 20px til 30px og så videre.

Funktionen arbejder med de samme parametre som radial-gradient, forskellen er kun i gentagelseseffekten. Se de accepterede parametre i beskrivelsen af radial-gradient.

Syntaks

cssselektor {
  background: repeating-radial-gradient([form type position], farve1 størrelse1, farve2 størrelse2...);
}

Eksempel

Koncentriske cirkler:

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

Koncentriske 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

Placer koncentriske cirkler ikke i centrum, 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å