CSS repeating-linear-gradient() Funktion

Definition und Verwendung

CSS repeating-linear-gradient() Die Funktion wird für wiederholende lineare Verlaufsgradationen verwendet.

Beispiel:

Lineare Verlaufsgradation Wiederholende lineare Verlaufsgradation
linear-gradient(red, yellow, blue); repeating-linear-gradient(red, yellow 10%, blue 20%);

Beispiel

Beispiel 1

Ein wiederholter linearer Verlaufsgradient:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Versuchen Sie es selbst

Beispiel 2

Verschiedene wiederholte lineare Verlaufsgradienten:

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

Versuchen Sie es selbst

CSS Syntax

repeating-linear-gradient(Winkel zu side-or-corner, color-stop1, color-stop2, ...);
Wert Beschreibung
Winkel Definiert den Winkel der Verlaufsrichtung. Von 0deg bis 360deg. Standardwert ist 180deg.
side-or-corner

Definiert den Ort des Anfangs der Verlaufsrichtung.

Es besteht aus zwei Schlüsselwörtern: Das erste stellt die horizontale Richtung (links oder rechts) dar, das zweite die vertikale Richtung (oben oder unten).

Die Reihenfolge ist irrelevant und jede Schlüsselwörter sind optional.
color-stop1, color-stop2,...

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

Dieser Wert besteht aus Farbwerten und einem oder zwei optionalen Stop-Positionen (Prozentsätze zwischen 0% und 100% oder Längen entlang des Verlaufsaxisses).

Technische Details

Version: CSS Images Module Level 3

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser-Version dar, die diese Funktion vollständig unterstützt.

Chrome Edge Firefox Safari Opera
repeating-linear-gradient()
26 10 16 6.1 12.1
Zwei Farbende-Punkte an Positionen
71 79 64 12.1 58

Verwandte Seiten

Tutorium:CSS Verlaufsgradient

Referenz:CSS-background-image-Eigenschaft

Referenz:CSS conic-gradient() Funktion

Referenz:CSS linear-gradient() Funktion

Referenz:CSS radial-gradient() Funktion

Referenz:CSS repeating-conic-gradient() Funktion

Referenz:CSS repeating-radial-gradient() Funktion