Функција repeating-linear-gradient

Функцијата repeating-linear-gradient задава повторувачки линеарен градиент. Ова значи дека ние задаваме одредена шема на градиент, на пример, од 0px до 10px - градиент од црвена до сина боја и овој градиент ќе се повторува на целиот блок: 0px до 10px, од 10px до 20px, од 20px до 30px и така натаму.

Оваа функција се применува на својствата кои задаваат слика на позадина: background, background-image или слика на граница: border-image, background-image-source.

Синтакса

селектор {
	background: repeating-linear-gradient([насока], боја1 големина1, боја2 големина2...);
}

Вредности

Вредност	Опис
насока	Задава одредена насока на градиентот во било кои единици за агли или со клучни зборови `top`, `left`, `right`, `bottom` или нивна комбинација. Редоследот на зборовите не е важен. Параметарот не е задолжителен: ако не е напишан, градиентот ќе оди од горе надолу. Пред насоката се става зборот `to`.
агол	Агол во било кои единици за агли. Може да биде позитивен или негативен. Параметарот не е задолжителен. Истовремено може да биде зададен или агол, или насока (или ништо).
боја1	Почетна боја на градиентот во било кои единици за боја.
боја2	Крајна боја на градиентот во било кои единици за боја.
големина	Задава должина на одредена боја на градиентот во било кои единици за големина.

Пример . Наједноставна варијанта

Градиентот ќе изгледа вака: од 0px до 20px чиста црвена боја, од 20px до 40px - градиент од црвена до сина боја. И така ќе се повторува од горе надолу (за тоа е и повторувачки градиент):

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

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Пример . Јасни бои

Градиентот ќе изгледа вака: од 0px до 20px чиста црвена боја, од 20px до 40px - чиста сина боја (финтата е во тоа што втората боја започнува таму каде што завршува првата). И така ќе се повторува од горе надолу:

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

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Пример . Промена на насоката

Сега насоката на градиентот ќе биде од десно кон лево:

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

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Пример . Насока во степени

Како насока ќе зададеме агол во степени:

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

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Пример . Негативна вредност

Да ја направиме насоката негативна вредност:

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

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Погледнете исто така

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