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 функциясы,
ал радиалдык градиентти түзөт