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