CSS kegel-gradiënt() Functie
Voorbeeld
Een kegelvormig verloop met drie kleuren:
#grad {
background-image: conic-gradient(red, yellow,
green);
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De functie kegelvormig verloop() stelt een kegelvormig verloop in als achtergrondafbeelding.
Een kegelvormig verloop is een verloop met kleurovergangen die rond een middelpunt zijn geroteerd.
Om een kegelvormig verloop te maken, moet u minimaal twee kleurstops definiëren.
Voorbeeld van kegelvormig verloop:
Versie: | CSS3 |
---|
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de functie volledig ondersteunt.
Function | |||||
---|---|---|---|---|---|
conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
CSS-syntaxis
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 voorbeelden
Voorbeeld
Een kegelvormig verloop met vijf kleuren:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
}
Voorbeeld
Een kegelvormig verloop met drie kleuren en een graad voor elke kleur:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}
Voorbeeld
Laat de kegelvormige gradiënt eruitzien als een taart door randradius toe te voegen: 50%:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Voorbeeld
Een kegelvormig verloop met een vanuit een hoek:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
Voorbeeld
Een kegelvormig verloop met een op positie:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Voorbeeld
Een conisch verloop met zowel vanuit een hoek als vanuit positie:
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Voorbeeld
Nog een taartdiagram:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow
90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-verlopen