CSS repeating-radial-gradient() Funktion

Definition und Verwendung

CSS wiederholender-radialer Gradient Funktion zur Erstellung eines wiederholten radialen Farbverlaufs.

Radialer Farbverlauf	Wiederholter radialer Farbverlauf

radial-gradient(red, yellow, green);	repeating-radial-gradient(red, yellow 10%, green 15%);

Eine wiederholte radiale Farbverlauf:

#grad {
  background-image: wiederholender-radialer Gradient(red, yellow 10%, green 15%);
}

Ein weiterer wiederholender radialer Gradient, der Formgröße und Position gesetzt hat:

#grad1 {
  background-image: wiederholender-radialer Gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

Ein weiterer wiederholender radialer Gradient, der zwei Farbende gesetzt hat:

#grad1 {
  background-image: wiederholender-radialer Gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

wiederholender-radialer Gradient(shape size at position, start-color, ... , last-color);

Wert	Beschreibung
shape	Definiert die Form des Gradienten. Mögliche Werte: ellipse (Standard) circle
size	Definiert die Größe des Gradienten. Mögliche Werte: farthest-corner (Standard) closest-side closest-corner farthest-side
at position	Definiert den Ort des Gradienten. Standardwert ist "center".
start-color, ... , last-color	Farbende sind die Farben, zwischen denen Sie eine glatte Übergangsweiche wünschen. Dieser Wert besteht aus Farbwert und einem oder zwei optionalen Stopps (Prozentsätze zwischen 0% und 100% oder Längen entlang des Gradientenachses).

Version:	CSS Bilder Modul Stufe 3

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

Chrome	Edge	Firefox	Safari	Opera
wiederholender-radialer Gradient
26	10	16	6.1	12.1
Zwei Positionen der Farbende
71	79	64	12.1	58