Funkcija repeating-linear-gradient

Funkcija repeating-linear-gradient nustato kartojantį tiesinį gradientą. Tai reiškia, kad mes nustatome tam tikrą gradiento raštą, pavyzdžiui, nuo 0px iki 10px - gradientas nuo raudonos iki žydros spalvos ir šis gradientas bus kartojamas per visą bloką: 0px iki 10px, nuo 10px iki 20px, nuo 20px iki 30px ir taip toliau.

Ši funkcija taikoma savybėms, kurios nustato fono paveikslėlį: background, background-image arba rėmelio paveikslėlį: border-image, background-image-source.

Sintaksė

selektorius {
	background: repeating-linear-gradient([kryptis], spalva1 dydis1, spalva2 dydis2...);
}

Reikšmės

Reikšmė	Aprašas
kryptis	Nustato tam tikrą gradiento kryptį bet kokiame kampo vienete arba raktažodžiais `top`, `left`, `right`, `bottom` arba jų deriniu. Žodžių tvarka nesvarbi. Parametras neprivalomas: jei jo neparašysite, gradientas eis iš viršaus į apačią. Prieš kryptį rašomas žodis `to`.
kampas	Kampas bet kokiame kampo vienete. Gali būti teigiamas arba neigiamas. Parametras neprivalomas. Vienu metu gali būti nustatytas arba kampas, arba kryptis (arba nieko).
spalva1	Pradinė gradiento spalva bet kokiame spalvos vienete.
spalva2	Galinė gradiento spalva bet kokiame spalvos vienete.
dydis	Nustato tam tikros gradiento spalvos tęsinį bet kokiame dydžio vienete.

Pavyzdys . Paprasčiausias variantas

Gradientas atrodys taip: nuo 0px iki 20px gryna raudona spalva, nuo 20px iki 40px - gradientas nuo raudonos iki žydros spalvos. Ir taip kartosis iš viršaus į apačią (tam jis ir kartojantis gradientas):

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

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

Pavyzdys . Aiškios spalvos

Gradientas atrodys taip: nuo 0px iki 20px gryna raudona spalva, nuo 20px iki 40px - gryna žydra spalva (esmė ta, kad antroji spalva prasideda ten, kur baigiasi pirmoji). Ir taip kartosis iš viršaus į apačią:

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

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

Pavyzdys . Pakeiskime kryptį

Dabar gradiento kryptis bus iš dešinės į kairę:

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

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

Pavyzdys . Kryptis laipsniais

Kaip kryptį nustatysime kampą laipsniais:

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

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

Pavyzdys . Neigiama reikšmė

Padarykime kryptį neigiama reikšme:

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

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

Taip pat žiūrėkite

funkciją repeating-radial-gradient,
kuri sukuria kartojantį radialinį gradientą
funkciją linear-gradient,
kuri sukuria tiesinį gradientą
funkciją radial-gradient,
kuri sukuria radialinį gradientą