Kazi ya linear-gradient

Kazi linear-gradient inabainisha msambao wa mstari. Inatumika kwa sifa ambazo hubainisha picha ya usuli: background, background-image au picha ya mpaka: border-image, background-image-source.

Kisarufu

kichagua {
	background: linear-gradient([pembe au mwelekeo], rangi1 ukubwa1, rangi2 ukubwa2...);
}

Thamani

Thamani	Maelezo
mwelekeo	Hubainisha mwelekeo maalum wa msambao katika vyovyote vipimo vya pembe ama kwa maneno muhimu `top`, `left`, `right`, `bottom` au mchanganyiko wake: `top left`, `top right` na kadhalika. Utaratibu wa maneno hauna maana: unaweza kuandika `top left` na `left top`, hakuna tofauti. Kigezo si cha lazima: ikiwa hakiandiki, msambao utakuwa uanzia juu hadi chini (kama `to top`). Kabla ya mwelekeo huwekwa neno `to`.
pembe	Pembe katika vyovyote vipimo vya pembe. Inaweza kuwa chanya au hasi. Kigezo si cha lazima. Wakati mmoja kunaweza kubainishwa ama pembe, ama mwelekeo (au hakuna chochote kabisa).
rangi1	Rangi ya mwanzo ya msambao katika vyovyote vipimo vya rangi.
rangi2	Rangi ya mwisho ya msambao katika vyovyote vipimo vya rangi.
ukubwa	Hubainisha eneo la rangi maalum ya msambao katika vyovyote vipimo vya ukubwa.

Mfano . Chaguo rahisi zaidi

Kisarufu:

kichagua {
	background: linear-gradient(rangi ya mwanzo, rangi ya mwisho);
}

Tuangalie kwa mfano:

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

#elem {
	background: linear-gradient(black, red);
	width: 200px;
	height: 200px;
}

Mfano . Kuongeza pembe

Kisarufu:

kichagua {
	background: linear-gradient(pembe, rangi ya mwanzo, rangi ya mwisho);
}

Tuangalie kwa mfano:

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

#elem {
	background: linear-gradient(45deg, black, red);
	width: 200px;
	height: 200px;
}

Mfano . Kuongeza mwelekeo

Badala ya pembe unaweza kuongeza mwelekeo top, left, right, bottom au mchanganyiko wake: top left, top right Kabla ya mwelekeo huwekwa neno to.

Kisarufu:

kichagua {
	background: linear-gradient(mwelekeo, rangi ya mwanzo, rangi ya mwisho);
}

Tuangalie kwa mfano:

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

#elem {
	background: linear-gradient(to left, black, red);
	width: 200px;
	height: 200px;
}

Mfano . Kuongeza mwelekeo

Tubainishe mwelekeo mwingine:

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

#elem {
	background: linear-gradient(to top left, black, red);
	width: 200px;
	height: 200px;
}

Mfano . Kuongeza ukubwa

Kisarufu:

kichagua {
	background: linear-gradient(rangi1 ukubwa1, rangi2 ukubwa2);
}

Katika mfano ufuatao tabia itakuwa ifuatavyo: rangi nyekundu safi itakuwa kutoka 0px hadi 30px, kutoka 30px hadi 50px utakuwa msambao kutoka nyekundu hadi bluu, na kutoka 50px na hadi mwisho - bluu safi:

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

#elem {
	background: linear-gradient(red 30px, blue 50px);
	width: 200px;
	height: 200px;
}

Mfano . Kuongeza rangi zaidi ya `2`

Kisarufu:

kichagua {
	background: linear-gradient(rangi1 ukubwa1, rangi2 ukubwa2, rangi3 ukubwa3...);
}

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

#elem {
	background: linear-gradient(red 30px, blue 50px, green 70px);
	width: 200px;
	height: 200px;
}

Mfano . Mabadiliko makali

Katika mfano ufuatao tabia itakuwa ifuatavyo: rangi nyekundu safi itakuwa kutoka 0px hadi 30px, bluu safi - kutoka 30px hadi 60px, kijani safi - baada ya 60px (red 0px pia hauhitaji kuandikwa):

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

#elem {
	background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
	width: 200px;
	height: 200px;
}

Mfano . Ukubwa unaweza kubainishwa kwa asilimia pia

Katika mfano ufuatao tabia itakuwa ifuatavyo: rangi nyekundu safi itakuwa kutoka 0% hadi 30%, bluu safi - kutoka 30% hadi 60%, kijani safi - baada ya 60% (red 0% pia hauhitaji kuandikwa):

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

#elem {
	background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
	width: 200px;
	height: 200px;
}

Mfano . Mchanganyiko na background-size

Katika mfano ufuatao tabia itakuwa ifuatavyo: rangi nyekundu safi itakuwa kutoka 0px hadi 30px, bluu safi - kutoka 30px hadi 60px, huku yote hii ikirudiwa kwa vipande vya 60px (kwa sababu ya background-size: 60px;):

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

#elem {
	background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
	background-size: 60px 60px;
	width: 200px;
	height: 200px;
}

Angalia pia

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

Kazi ya linear-gradient

Kisarufu

Thamani

Mfano . Chaguo rahisi zaidi

Mfano . Kuongeza pembe

Mfano . Kuongeza mwelekeo

Mfano . Kuongeza mwelekeo

Mfano . Kuongeza ukubwa

Mfano . Kuongeza rangi zaidi ya 2

Mfano . Mabadiliko makali

Mfano . Ukubwa unaweza kubainishwa kwa asilimia pia

Mfano . Mchanganyiko na background-size

Angalia pia

Mfano . Kuongeza rangi zaidi ya `2`