Funksie repeating-linear-gradient

Die funksie repeating-linear-gradient spesifiseer 'n herhalende lineêre verloop. Dit beteken dat ons 'n spesifieke verloop-patroon definieer, byvoorbeeld, van 0px tot 10px - 'n verloop van rooi na blou, en hierdie verloop sal herhaal word oor die hele blok: van 0px tot 10px, van 10px tot 20px, van 20px tot 30px, en so aan.

Hierdie funksie word toegepas op eienskappe wat 'n agtergrondbeeld spesifiseer: background, background-image of 'n randbeeld: border-image, background-image-source.

Sintaksis

selektor {
	background: repeating-linear-gradient([rigting], kleur1 grootte1, kleur2 grootte2...);
}

Waardes

Waarde	Beskrywing
rigting	Spesifiseer 'n sekere rigting van die verloop in enige eenhede vir hoeke of met sleutelwoorde `top`, `left`, `right`, `bottom` of hul kombinasie. Die volgorde van die woorde is nie belangrik nie. Hierdie parameter is opsioneel: as dit nie geskryf word nie, sal die verloop van bo na onder loop. Die woord `to` word voor die rigting geplaas.
hoek	'n Hoek in enige eenhede vir hoeke. Kan positief of negatief wees. Hierdie parameter is opsioneel. Óf 'n hoek, óf 'n rigting kan tegelyk gespesifiseer word (of glad nie).
kleur1	Begin kleur van die verloop in enige eenhede vir kleur.
kleur2	Eind kleur van die verloop in enige eenhede vir kleur.
grootte	Spesifiseer die omvang van 'n spesifieke kleur van die verloop in enige eenhede vir grootte.

Voorbeeld . Die eenvoudigste opsie

Die verloop sal so lyk: van 0px tot 20px suiwer rooi kleur, van 20px tot 40px - 'n verloop van rooi na blou. En dit sal van bo na onder herhaal (dit is 'n herhalende verloop):

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

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

Voorbeeld . Harde kleure

Die verloop sal so lyk: van 0px tot 20px suiwer rooi kleur, van 20px tot 40px - suiwer blou (die kenmerk is dat die tweede kleur begin waar die eerste een eindig). En dit sal van bo na onder herhaal:

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

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

Voorbeeld . Verander die rigting

Nou sal die rigting van die verloop van regs na links wees:

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

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

Voorbeeld . Rigting in grade

As rigting gee ons 'n hoek in grade:

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

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

Voorbeeld . Negatiewe waarde

Laat ons die rigting 'n negatiewe waarde maak:

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

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

Sien ook

die funksie repeating-radial-gradient,
wat 'n herhalende radiale verloop skep
die funksie linear-gradient,
wat 'n lineêre verloop skep
die funksie radial-gradient,
wat 'n radiale verloop skep