Функсияи 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,
ки градиенти давравиро эҷод мекунад