CSS Radiaal Verloop

CSS Radiaal Verloop

De radiale verloop wordt gedefinieerd door het middelpunt.

Om een radiale verloop te maken, moet u ten minste twee kleurindicators definiëren.

syntaxis

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

standaard,shape als ovale,size als de verste hoek,position als middelpunt.

Radiale verloop - gelijke intervals van de kleurindicators (standaard)

Het volgende voorbeeld toont een radiale verloop met gelijke intervals tussen de kleurindicators:

Voorbeeld

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

Probeer het zelf

Radiale verloop - kleurindicators met verschillende intervals

Het volgende voorbeeld toont een radiale verloop met verschillende intervals tussen de kleurindicators:

Voorbeeld

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

Probeer het zelf

Stel de vorm in

shape De parameter definieert de vorm. Het kan de waarden circle of ellipse accepteren. De standaardwaarde is ellipse (ovale).

Het volgende voorbeeld toont een cirkelvormige radiale verloop:

Voorbeeld

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

Probeer het zelf

Gebruik sleutelwoorden met verschillende grootte

size De parameter definieert de grootte van de verloop. Het kan vier waarden accepteren:

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

Voorbeeld

Geconfigureerde differente size-sleutelwoorden voor de radiale verloop:

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

Probeer het zelf

Herhalende radiale verdeling

repeating-radial-gradient() De functie wordt gebruikt voor herhalende radiale verdeeldingen:

Voorbeeld

Herhalende radiale verdeling:

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

Probeer het zelf

CSS Gradient Eigenschappen

De volgende tabel geeft de CSS Gradient eigenschappen weer:

Eigenschap Beschrijving
background-image Een achtergrondafbeelding of meerdere achtergrondafbeeldingen instellen voor een element.