CSS Koniese Gradiënte
CSS Koniese Gradiënte
'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 kleure definieer.
Sintaksis
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
By verstek is hoek 0grade en posisie is middelpunt.
As geen graad gespesifiseer word nie, sal die kleure eweredig rondom die middelpunt versprei word.
Kegelvormige gradiënt: drie kleure
Die volgende voorbeeld toon 'n koniese gradiënt met drie kleure:
Voorbeeld
'n Kegelvormige gradiënt met drie kleure:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Kegelvormige Gradiënt: Vyf Kleure
Die volgende voorbeeld toon 'n keëlvormige gradiënt met vyf kleure:
Voorbeeld
'n Kegelvormige gradiënt met vyf kleure:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Kegelvormige gradiënt: drie kleure en grade
Die volgende voorbeeld toon 'n koniese gradiënt met drie kleure en 'n graad vir elke kleur:
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);
}
Skep sirkeldiagramme
Voeg net by border-radius: 50%om die koniese gradiënt soos 'n pastei te laat lyk:
Voorbeeld
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Hier is nog 'n sirkelgrafiek met gedefinieerde grade vir al die kleure:
Voorbeeld
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Kegelvormige Gradiënt Met Gespesifiseerde Vanuit Hoek
Die [van hoek ] spesifiseer 'n hoek waarmee die hele kegelgradiënt geroteer word.
Die volgende voorbeeld toon 'n kegelvormige gradiënt met 'n hoek van 90deg:
Voorbeeld
'n Kegelvormige gradiënt met 'n van-hoek:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Kegelvormige gradiënt met gespesifiseerde middelposisie
Die [by posisie ] spesifiseer die middelpunt van die kegelgradiënt.
Die volgende voorbeeld toon 'n kegelvormige gradiënt met 'n middelposisie van 60% 45%:
Voorbeeld
'n Kegelvormige gradiënt met 'n gespesifiseerde middelposisie:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Herhaal 'n kegelvormige gradiënt
Die repeating-conic-gradient()funksie word gebruik om koniese gradiënte te herhaal:
Voorbeeld
'n Herhalende kegelgradiënt:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Hier is 'n herhalende kegelgradiënt met gedefinieerde kleurbegin en kleurstop:
Voorbeeld
'n Herhalende kegelgradiënt met gedefinieerde kleurbegin en kleurstoppe:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
CSS-gradiëntfunksies
Die volgende tabel lys die CSS-gradiëntfunksies:
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |