Kazi ya repeating-linear-gradient

Kazi repeating-linear-gradient huweka mwinuko wa mstari unaorudiwa. Hii inamaanisha kuwa tunaweka muundo maalum wa mwinuko, kwa mfano, kutoka 0px hadi 10px - mwinuko kutoka nyekundu hadi samawati na mwinuko huu uta rudiwa kwenye kizuizi chote: 0px hadi 10px, kutoka 10px hadi 20px, kutoka 20px hadi 30px na kadhalika.

Kazi hii inatumika kwa sifa ambazo huweka picha ya usuli: background, background-image au picha ya mpaka: border-image, background-image-source.

Kisarufu

kichaguli {
	background: repeating-linear-gradient([mwelekeo], rangi1 ukubwa1, rangi2 ukubwa2...);
}

Thamani

Thamani	Maelezo
mwelekeo	Huwa mwelekeo maalum wa mwinuko katika vipimo vya pembe vyovyote ama kwa maneno muhimu `top`, `left`, `right`, `bottom` au mchanganyiko wake. Utaratibu wa maneno hauna maana. Kigeuzi sio lazima: kama hukiandika, mwinuko utaenda kutoka juu hadi chini. Kabla ya mwelekeo huwekwa neno `to`.
pembe	Pembe katika vipimo vya pembe vyovyote. Inaweza kuwa chanya au hasi. Kigeuzi sio lazima. Wakati mmoja kunaweza kuwekwa ama pembe, ama mwelekeo (au hakuna chochote).
rangi1	Rangi ya mwanzo ya mwinuko katika vipimo vya rangi vyovyote.
rangi2	Rangi ya mwisho ya mwinuko katika vipimo vya rangi vyovyote.
ukubwa	Huweka urefu wa rangi maalum ya mwinuko katika vipimo vya ukubwa vyovyote.

Mfano . Chaguo rahisi zaidi

Mwinuko utaonekana hivi: kutoka 0px hadi 20px rangi nyekundu safi, kutoka 20px hadi 40px - mwinuko kutoka nyekundu hadi samawati. Na hivi vitarudiwa kutoka juu hadi chini (kwa sababu hii ndio mwinuko unaorudiwa):

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

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

Mfano . Rangi zilizo wazi

Mwinuko utaonekana hivi: kutoka 0px hadi 20px rangi nyekundu safi, kutoka 20px hadi 40px - rangi samawati safi (kibao ni kwamba rangi ya pili huanza pale inapoisha ya kwanza). Na hivi vitarudiwa kutoka juu hadi chini:

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

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

Mfano . Tubadilishe mwelekeo

Sasa mwelekeo wa mwinuko utakuwa kutoka kulia hadi kushoto:

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

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

Mfano . Mwelekeo kwa digrii

Kama mwelekeo tutaweka pembe kwa digrii:

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

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

Mfano . Thamani hasi

Tufanye mwelekeo uwe na thamani hasi:

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

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

Angalia pia

kazi repeating-radial-gradient,
ambayo huunda mwinuko wa duara unaorudiwa
kazi linear-gradient,
ambayo huunda mwinuko wa mstari
kazi radial-gradient,
ambayo huunda mwinuko wa duara