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 ֆունկցիան,
որը ստեղծում է ճառագայթային գրադիենտ