Функцыя 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,
якая стварае радыяльны градыент