Funktion repeating-radial-gradient

Die Funktion repeating-radial-gradient legt einen sich wiederholenden radialen Farbverlauf fest. Das bedeutet, dass wir ein bestimmtes Farbverlaufsmuster festlegen, zum Beispiel von 0px bis 10px - ein Farbverlauf von Rot zu Blau, und dieser Farbverlauf wird über den gesamten Block wiederholt: 0px bis 10px, von 10px bis 20px, von 20px bis 30px und so weiter.

Die Funktion arbeitet mit den gleichen Parametern wie radial-gradient, der einzige Unterschied liegt im Wiederholungseffekt. Die akzeptierten Parameter finden Sie in der Beschreibung von radial-gradient.

Syntax

Selektor {
	background: repeating-radial-gradient([Form Typ Position], Farbe1 Größe1, Farbe2 Größe2...);
}

Beispiel

Konzentrische Kreise:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

Beispiel

Konzentrische Ellipsen:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
	width: 400px;
	height: 200px;
}

Beispiel

Platzieren wir die konzentrischen Kreise nicht in der Mitte, sondern am Rand:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

Siehe auch

die Funktion repeating-linear-gradient,
die einen sich wiederholenden linearen Farbverlauf erzeugt
die Funktion linear-gradient,
die einen linearen Farbverlauf erzeugt
die Funktion radial-gradient,
die einen radialen Farbverlauf erzeugt