Funkcja repeating-radial-gradient

Funkcja repeating-radial-gradient ustawia powtarzający się gradient promienisty. Oznacza to, że definiujemy określony wzór gradientu, na przykład od 0px do 10px - gradient od czerwonego do niebieskiego i ten gradient będzie powtarzany na całym bloku: 0px do 10px, od 10px do 20px, od 20px do 30px i tak dalej.

Funkcja działa z tymi samymi parametrami, co radial-gradient, różnica polega tylko na efekcie powtarzania. Przyjmowane parametry można znaleźć w opisie radial-gradient.

Składnia

selektor {
	background: repeating-radial-gradient([kształt typ pozycja], kolor1 rozmiar1, kolor2 rozmiar2...);
}

Przykład

Koncentryczne okręgi:

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

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

Przykład

Koncentryczne elipsy:

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

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

Przykład

Umieśćmy koncentryczne okręgi nie na środku, a z boku:

<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;
}

Zobacz też

funkcję repeating-linear-gradient,
która tworzy powtarzający się gradient liniowy
funkcję linear-gradient,
która tworzy gradient liniowy
funkcję radial-gradient,
która tworzy gradient promienisty