CSS-rektangulær gradation

CSS-rektangulær gradation

Radialgradient defineres af dens center.

For at oprette en radialgradient, skal du også definere mindst to farvekoder.

syntaks

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

standardmässigtshape til ellipsesize til den fjerneste hjørneposition centreret.

Radialgradient - jævnt adskilte farvekoder (standard)

Følgende eksempel viser en radialgradient med jævnt adskilte farvekoder:

Eksempel

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

Prøv det selv

Radialgradient - forskellige intervaller mellem farvekoderne

Følgende eksempel viser en radialgradient med forskellige intervaller mellem farvekoderne:

Eksempel

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

Prøv det selv

Indstil form

shape Parameter definerer formen. Det kan acceptere værdierne circle eller ellipse. Standardværdien er ellipse (ellipsoid).

Følgende eksempel viser en cirkulær radialgradient:

Eksempel

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

Prøv det selv

Brug af forskellige størrelsesnøgleord

size Parameter definerer størrelsen af graden. Det kan acceptere fire værdier:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Eksempel

Indsatte forskellige size-nøgleord for radialgradient:

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

Prøv det selv

Gentagende radial gradning

repeating-radial-gradient() Funktionen bruges til gentagende radial gradning:

Eksempel

Gentagende radial gradning:

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

Prøv det selv

CSS gradningsegenskaber

Følgende tabel viser CSS gradningsegenskaber:

Egenskab Beskrivelse
background-image Indstil et eller flere baggrundsbilleder til et element.