Функција 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,
која креира радијални градијент