Функция repeating-radial-gradient

Функцията repeating-radial-gradient задава повтарящ се радиален градиент. Това означава, че задаваме определен модел на градиента, например, от 0px до 10px - градиент от червено към синьо и този градиент ще се повтаря върху целия блок: 0px до 10px, от 10px до 20px, от 20px до 30px и така нататък.

Функцията работи със същите параметри, като radial-gradient, разликата е само в ефекта на повторение. Приеманите параметри вижте в описанието на radial-gradient.

Синтаксис

селектор {
	background: repeating-radial-gradient([форма тип позиция], цвят1 размер1, цвят2 размер2...);
}

Пример

Концентрични кръгове:

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

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

Пример

Концентрични елипси:

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

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

Пример

Поставяме концентрични кръгове не в центъра, а отстрани:

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

Вижте също

функцията repeating-linear-gradient,
която създава повтарящ се линеен градиент
функцията linear-gradient,
която създава линеен градиент
функцията radial-gradient,
която създава радиален градиент