CSS conic-gradient() Funksie
Voorbeeld
'n Kegelvormige gradiënt met drie kleure:
#grad {
background-image: conic-gradient(red, yellow,
green);
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die conic-gradient()-funksie stel 'n koniese gradiënt as die agtergrondprent.
'n Kegelvormige gradiënt is 'n gradiënt met kleuroorgange wat om 'n middelpunt geroteer word.
Om 'n koniese gradiënt te skep, moet jy ten minste twee kleurstops definieer.
Voorbeeld van koniese gradiënt:
| Weergawe: | CSS3 |
|---|
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die funksie ten volle ondersteun.
| Function | |||||
|---|---|---|---|---|---|
| conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
CSS-sintaksis
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
| Value | Description |
|---|---|
| from angle | Optional. The entire conic gradient is rotated by this angle. Default value is 0deg |
| at position | Optional. Specifies the gradient center of the conic gradient. Default value is center |
| color degree, ..., color degree | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a degree between 0 and 360 or a percent between 0% and 100%). |
Meer voorbeelde
Voorbeeld
'n Kegelvormige gradiënt met vyf kleure:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
}
Voorbeeld
'n Kegelvormige gradiënt met drie kleure en 'n graad vir elke kleur:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}
Voorbeeld
Laat die keëlvormige gradiënt soos 'n pastei lyk deur rand-radius by te voeg: 50%:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Voorbeeld
'n Kegelvormige gradiënt met 'n van-hoek:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
Voorbeeld
'n Kegelvormige gradiënt met 'n by posisie:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Voorbeeld
'n Kegelvormige gradiënt met beide van hoek en op posisie:
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Voorbeeld
Nog 'n sirkelgrafiek:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow
90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
Verwante bladsye
CSS-tutoriaal: CSS-gradiënte