CSS conic-gradient() Funktion
Beispiel
Ein konischer Farbverlauf mit drei Farben:
#grad {
background-image: conic-gradient(red, yellow,
green);
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Funktion conic-gradient() setzt einen konischen Farbverlauf als Hintergrundbild.
Ein konischer Farbverlauf ist ein Farbverlauf mit um einen Mittelpunkt gedrehten Farbübergängen.
Um einen konischen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farbstopps definieren.
Beispiel für einen konischen Gradienten:
Ausführung: | CSS3 |
---|
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Funktion vollständig unterstützt.
Function | |||||
---|---|---|---|---|---|
conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
CSS-Syntax
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%). |
Mehr Beispiele
Beispiel
Ein konischer Farbverlauf mit fünf Farben:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
}
Beispiel
Ein konischer Farbverlauf mit drei Farben und einem Grad für jede Farbe:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}
Beispiel
Lassen Sie den konischen Verlauf wie einen Kuchen aussehen, indem Sie border-radius: 50% hinzufügen:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Beispiel
Ein konischer Verlauf mit einem Winkel von:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
Beispiel
Ein konischer Gradient mit einer at-Position:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Beispiel
Ein konischer Farbverlauf mit sowohl von Winkel als auch von Position:
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Beispiel
Noch ein Tortendiagramm:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow
90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
Verwandte Seiten
CSS-Tutorial: CSS-Verläufe