CSS repeating-radial-gradient() funktion

Definition og brug

CSS repeating-radial-gradient() Funktioner bruges til gentagende radialgrader.

Eksempel:

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

Eksempel

Eksempel 1

En gentagende radialgrad:

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

Prøv det selv

Eksempel 2

En anden gentagende radial-gradiens, der har sat form, størrelse og position:

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

Prøv det selv

Eksempel 3

En anden gentagende radial-gradiens, der har to farveafslutningspunkter:

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

Prøv det selv

CSS syntaks

repeating-radial-gradient(shape size at position, start-color, ... , last-color);
Værdi Beskrivelse
shape

Definerer formen for graden. Mulige værdier:

  • ellipse (standard)
  • circle
size

Definerer størrelsen af graden. Mulige værdier:

  • farthest-corner (standard)
  • closest-side
  • closest-corner
  • farthest-side
at position Definerer positionen for graden. Standardværdien er "center".
start-color, ... , last-color

Farveafslutningspunkter er de farver, du ønsker at vise en glat overgang mellem.

Værdien består af farveværdier og en eller to valgfri stoppositioner (procenter mellem 0% og 100% eller længde langs graden)

Tekniske detaljer

Version: CSS Images Modul Niveau 3

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter funktionen.

Chrome Edge Firefox Safari Opera
repeating-radial-gradient()
26 10 16 6.1 12.1
to placers farveafslutningspunkter
71 79 64 12.1 58

Relaterede sider

Tilvejebringselsesvejledning:CSS gradient

Reference:CSS background-image egenskab

Reference:CSS konisk-gradiens-funktion

Reference:CSS lineær-gradiens-funktion

Reference:CSS radial-gradiens-funktion

Reference:CSS gentagende-konisk-gradiens-funktion

Reference:CSS repeating-linear-gradient() funktion