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

Функцыя repeating-radial-gradient задае паўтаральны радыяльны градыент. Гэта значыць, што мы задаем пэўны ўзор градыенту, напрыклад, ад 0px да 10px - градыент ад чырвонага да блакітнага і гэты градыент будзе паўтарацца на ўвесь блок: 0px да 10px, ад 10px да 20px, ад 20px да 30px і так далей.

Функцыя працуе з тымі ж параметрамі, што і radial-gradient, адрозненне толькі ў эфекце паўтарэння. Прымаемыя параметры глядзіце ў апісанні radial-gradient.

Сінтаксіс

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

Прыклад

Канцэнтрычныя кругі:

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

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

Результат:

Прыклад

Канцэнтрычныя эліпсы:

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

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

Результат:

Прыклад

Размясцім канцэнтрычныя кругі не па цэнтры, а з краю:

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

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

Результат:

Глядзіце таксама