CSS radial-gradient() funksjonen

Definisjon og bruk

CSS radial-gradient() Funksjonen setter radial gradiasjon som bakgrunnsbilde.

Radial gradiasjon defineres av sitt sentrum.

For å opprette en radial gradiasjon, må du definere minst to fargeindekser.

Eksempel på radial gradiasjon:

Eksempel

Eksempel 1

Fargeindeksfordeling av jevn radiale gradiasjon:

#grad {
  background-image: radial-gradient(red, green, blue);
}

Prøv det selv

Eksempel 2

Fargeindeksfordeling av forskjellige radiale gradiasjoner:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

Prøv det selv

Eksempel 3

Cirkulær form af radial gradient:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Prøv det selv

Eksempel 4

Brug forskellige størrelsesnøgler til radial gradient:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

Prøv det selv

CSS syntaks

radial-gradient(shape size at position, start-color, ... , last-color);

Tekniske detaljer

Browserunderstøttelse

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

Relaterede sider

Tilvejebringses vejledning:CSS gradient

Reference:CSS background-image egenskab

Reference:CSS konisk-grad() funktion

Reference:CSS linjær-grad() funktion

Reference:CSS gentagende-konisk-grad() funktion

Reference:CSS gentagende-linjær-grad() funktion

Reference:Reference: CSS repeating-radial-gradient() funktion