CSS conic-gradient()-Funktion

CSS-Funktionen

Beispiel

Dreifarbiger konischer Farbverlauf:

#grad { background-image: conic-gradient(red, yellow, green); }

Selbst ausprobieren »

Definition und Verwendung

Die Funktion conic-gradient() erzeugt ein Bild, das aus Farbverläufen besteht.

Konische Farbverläufe überblenden Farben, die um einen Mittelpunkt gedreht werden (anstatt vom Zentrum nach außen zu strahlen).

Um einen konischen Farbverlauf zu erstellen, müssen mindestens zwei Farbstopps festgelegt werden.

Beispiel für einen konischen Farbverlauf:

An der Abbildung können wir die Verlaufsrichtung und den Startpunkt des konischen Farbverlaufs erkennen. Der Startpunkt ist die Mitte der Form, und der Verlaufseffekt wird im Uhrzeigersinn um die Mitte herum umgesetzt.
Version: CSS3

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversionsnummer an, die die Funktion unterstützt.

Funktion
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, ...);
Wert Beschreibung
from angle Optional. Der Startwinkel. Standardwert ist 0deg.
at position Optional. Mittelposition. Standard ist zentriert.
color degree, ..., color degree Winkel-Farbstopp. Der Wert besteht aus einem Farbwert, gefolgt von einer optionalen Stopposition (ein Grad zwischen 0 und 360 oder ein Prozentsatz zwischen 0% und 100%).

Weitere Beispiele

Beispiel

Fünffarbiger konischer Farbverlauf:

#grad { background: conic-gradient(red, orange, yellow, green, blue); }

Selbst ausprobieren »

Beispiel

Ein dreifarbiger konischer Farbverlauf, bei dem die Grad für jeden Farbverlauf festgelegt werden:

#grad { background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg) }

Selbst ausprobieren »

Beispiel

Durch Festlegenborder-radius: 50%Den konischen Farbverlauf in einen Kreis verwandeln:

#grad { background-image: conic-gradient(red, yellow, green, blue, black); border-radius: 50%; }

Selbst ausprobieren »

Beispiel

Startwinkel festlegen:

#grad { background-image: conic-gradient(from 90deg, red, yellow, green); border-radius: 50%; }

Selbst ausprobieren »

Beispiel

Mittelpunktposition angeben:

#grad { background-image: conic-gradient(at 60% 45%, red, yellow, green); border-radius: 50%; }

Selbst ausprobieren »

Beispiel

Geben Sie eine Position an und legen Sie einen Winkel fest:

#grad { background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green); border-radius: 50%; }

Selbst ausprobieren »

Beispiel

Ein Kreisdiagramm:

#grad { background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg); border-radius: 50%; }

Selbst ausprobieren » 
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);

Codeanalyse:

  • red 0deg, red 90degGibt an, dass das 0–90-Grad-Intervall red verwendet.
  • yellow 90deg, yellow 180degGibt an, dass das 90–180-Grad-Intervall yellow verwendet.
  • green 180degGibt an, dass das 180–360-Grad-Intervall green verwendet.

Beispiel

Erstellen Sie eine Farbwähler-Karte:

#grad { background: radial-gradient(closest-side, gray, transparent), conic-gradient(red, magenta, blue, aqua, lime, yellow, red); border-radius: 50%; }

Selbst ausprobieren »

CSS-Funktionen

Weitere Erweiterungen