Funksiya repeating-linear-gradient

Funksiya repeating-linear-gradient təkrarlanan xətti qradiyenti təyin edir. Bu o deməkdir ki, biz qradiyentin müəyyən bir naxışını təyin edirik, məsələn, 0px-dən 10px-ə qədər - qırmızıdan maviyə qradiyent və bu qradiyent bütün blok boyunca təkrarlanacaq: 0px-dən 10px-ə qədər, 10px-dən 20px-ə qədər, 20px-dən 30px-ə qədər və s.

Bu funksiya arxa plan şəklini təyin edən xassələrə şamil edilir: background, background-image və ya sərhəd şəklini: border-image, border-image-source.

Sintaksis

selektor {
	background: repeating-linear-gradient([istiqamət], rəng1 ölçü1, rəng2 ölçü2...);
}

Dəyərlər

Dəyər	Təsvir
istiqamət	Qradiyentin müəyyən bir istiqamətini hər hansı bucaqlar üçün vahidlərdə və ya açar sözlərlə təyin edir `top`, `left`, `right`, `bottom` və ya onların birləşməsi. Sözlərin sırası vacib deyil. Parametr isteğe bağlıdır: əgər yazılmasa, qradiyent yuxarıdan aşağıya doğru olacaq. İstiqamətdən əvvəl `to` sözü qoyulur.
bucaq	Hər hansı bucaqlar üçün vahidlərdə bucaq. Müsbət və ya mənfi ola bilər. Parametr isteğe bağlıdır. Eyni zamanda ya bucaq, ya istiqamət təyin edilə bilər (və ya heç nə).
rəng1	Qradiyentin başlanğıc rəngi hər hansı rəng üçün vahidlərdə.
rəng2	Qradiyentin son rəngi hər hansı rəng üçün vahidlərdə.
ölçü	Qradiyentin müəyyən bir rənginin uzunluğunu təyin edir hər hansı ölçü üçün vahidlərdə.

Nümunə . Ən sadə variant

Qradiyent belə görünəcək: 0px-dən 20px-ə qədər təmiz qırmızı rəng, 20px-dən 40px-ə qədər - qırmızıdan maviyə qradiyent. Və bu yuxarıdan aşağıya təkrarlanacaq (bunun üçün o, təkrarlanan qradiyentdir):

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

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

Nümunə . Təmiz rənglər

Qradiyent belə görünəcək: 0px-dən 20px-ə qədər təmiz qırmızı rəng, 20px-dən 40px-ə qədər - təmiz mavi (xüsusiyyət ondadır ki, ikinci rəng birincinin bitdiyi yerdə başlayır). Və bu yuxarıdan aşağıya təkrarlanacaq:

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

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

Nümunə . İstiqaməti dəyişək

İndi qradiyentin istiqaməti sağdan sola olacaq:

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

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

Nümunə . Dərəcələrdə istiqamət

İstiqamət kimi dərəcələrdə bucaq təyin edək:

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

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

Nümunə . Mənfi dəyər

İstiqaməti mənfi dəyər edək:

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

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

Həmçinin bax

funksiya repeating-radial-gradient,
təkrarlanan radial qradiyent yaradır
funksiya linear-gradient,
xətti qradiyent yaradır
funksiya radial-gradient,
radial qradiyent yaradır