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