CSS repeating-conic-gradient() Funktion

Definition und Verwendung

CSS repeating-conic-gradient() Die Funktion wird verwendet, um wiederholte konische Farbverläufe zu erzeugen.

Beispiel:

konischer Farbverlauf wiederholter konischer Farbverlauf
keilförmiger Farbverlauf(red, yellow); wiederholender keilförmiger Farbverlauf(red 10%, yellow 20%);

Beispiel

Beispiel 1

Ein wiederholender keilförmiger Farbverlauf:

#grad {
  background-image: wiederholender keilförmiger Farbverlauf(red 10%, yellow 20%);
}

Versuchen Sie es selbst

Beispiel 2

Ein wiederholender keilförmiger Farbverlauf, der den Anfangs- und Endpunkt der Farben definiert:

#grad {
  background-image: wiederholender keilförmiger Farbverlauf(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Versuchen Sie es selbst

Beispiel 3

Eine weitere wiederholende keilförmige Farbverlauf mit festgelegtem Startwinkel und Mittelpunkt:

#grad1 {
  background-image: wiederholender keilförmiger Farbverlauf(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

Versuchen Sie es selbst

CSS Syntax

wiederholender keilförmiger Farbverlauf([from Winkel], [at Position,] Farbgrad, Farbgrad, ... );
Wert Beschreibung
from Winkel

Optional. Der gesamte keilförmige Farbverlauf wird um diesen Winkel gedreht.

Standardwert ist 0deg.
at Position

Optional. Bestimmt den Mittelpunkt des keilförmigen Farbverlaufs.

Standardwert ist center.
Farbgrad, ... , Farbgrad

Farbende sind die Farben, zwischen denen Sie eine glatte Übergangsfarbe darstellen möchten.

Dieser Wert besteht aus Farbvalues und einem oder zwei optionalen Endpunkten (Winkel zwischen 0 und 360 Grad oder Prozent zwischen 0% und 100%)

Technische Details

Version: CSS Bilder Modul Level 4

Browser-Unterstützung

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

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

Verwandte Seiten

Anleitung:CSS Farbverlauf

Referenz:CSS-background-image Eigenschaft

Referenz:CSS konischer Farbverlauf() Funktion

Referenz:CSS linearer Farbverlauf() Funktion

Referenz:CSS radialer Farbverlauf() Funktion

Referenz:CSS repeating-linear-gradient() Funktion

Referenz:CSS wiederholender radialer Farbverlauf() Funktion