CSS-Funktion konische-Gradient()

Definition und Verwendung

CSS- konische-Gradient() Die Funktion setzt den konischen Gradienten als Hintergrundbild.

Ein konischer Gradient ist eine Farbveränderung, die sich um den Mittelpunkt dreht (ähnlich wie ein Kuchen und ein Farbrad).

Um einen konischen Gradienten zu erstellen, müssen mindestens zwei Farbstopps definiert werden.

Beispiel für konischen Gradienten:

Beispiel

Beispiel 1

Es gibt einen konischen Gradienten mit drei Farben:

#grad {
  background-image: konische-Gradient(red, yellow, green);
}

Versuchen Sie es selbst

Beispiel 2

Es gibt einen konischen Gradienten mit fünf Farben:

#grad {
  background-image: konische-Gradient(red, yellow, green, blue, black);
}

Versuchen Sie es selbst

Beispiel 3

Es gibt drei Farben und für jede Farbe wird ein Winkel angegeben, um den konischen Gradienten zu erstellen:

#grad {
  background-image: konische-Gradient(red 45deg, yellow 90deg, green 210deg);
}

Versuchen Sie es selbst

Beispiel 4

Durch Hinzufügen von border-radius: 50% sieht der konische Gradient wie ein Kuchen aus:

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

Versuchen Sie es selbst

Beispiel 5

Mit Startwinkel verbundenen kongischen Gradienten:

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

Versuchen Sie es selbst

Beispiel 6

Mit Mittelpunkt verbundenen kongischen Gradienten:

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

Versuchen Sie es selbst

Beispiel 7

Mit Startwinkel und Mittelpunkt verbundenen kongischen Gradienten:

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

Versuchen Sie es selbst

Beispiel 8

Ein weiteres Beispiel für eine Torte:

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

Versuchen Sie es selbst

CSS Syntax

background-image: conic-gradient([von Winkel][bei Position,] Farbgrad, Farbgrad, ... );

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Funktion vollständig unterstützen.

Verwandte Seiten

Tutorials:CSS Verlaufsgradient

Referenz:CSS-Property background-image

Referenz:CSS linearen-Gradient() Funktion

Referenz:CSS radialen-Gradient() Funktion

Referenz:CSS wiederholender kongischer-Gradient() Funktion

Referenz:CSS wiederholender linearen-Gradient() Funktion

Referenz:Bezug: CSS repeating-radial-gradient() Funktion