CSS Radiale Gradiënte
CSS Radiale Gradiënte
’n Radiale gradiënt word deur sy middelpunt gedefinieer.
Om 'n radiale gradiënt te skep, moet jy ook ten minste twee kleurstops definieer.
Sintaksis
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By verstek is vorm ellips, grootte is die verste hoek en posisie is middel.
Radiale gradiënt - eweredig gespasieerde kleurstops (dit is verstek)
Die volgende voorbeeld toon 'n radiale gradiënt met eweredig gespasieerde kleurstoppe:
Voorbeeld
#grad {
background-image: radial-gradient(red, yellow, green);
}
Radiale Gradiënt - Verskillende gespasieerde kleurstoppe
Die volgende voorbeeld toon 'n radiale gradiënt met verskillend gespasieerde kleurstoppe:
Voorbeeld
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Stel vorm
Die vorm parameter definieer die vorm. Dit kan die waardesirkel of ellips neem. Die verstekwaarde is ellips.
Die volgende voorbeeld toon 'n radiale gradiënt met die vorm van 'n sirkel:
Voorbeeld
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Gebruik van sleutelwoorde van verskillende groottes
Die grootte parameter definieer die grootte van die gradiënt. Dit kan vier waardes neem:
- naaste-kant
- verste kant
- naaste-hoek
- verste hoek
Voorbeeld
'n Radiale gradiënt met sleutelwoorde van verskillende groottes:
#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);
}
Herhaal 'n radiale gradiënt
Die repeating-radial-gradient() funksie word gebruik om radiale gradiënte te herhaal:
Voorbeeld
'n Herhalende radiale gradiënt:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}