Funksjonen repeating-linear-gradient

Funksjonen repeating-linear-gradient setter en repeterende lineær gradient. Dette betyr at vi setter et bestemt gradientmønster, for eksempel fra 0px til 10px - en gradient fra rød til blå, og denne gradienten vil gjentas over hele blokken: 0px til 10px, fra 10px til 20px, fra 20px til 30px og så videre.

Denne funksjonen brukes på egenskaper som setter bakgrunnsbilde: background, background-image eller rammebilde: border-image, background-image-source.

Syntaks

velger {
	background: repeating-linear-gradient([retning], farge1 størrelse1, farge2 størrelse2...);
}

Verdier

Verdi	Beskrivelse
retning	Setter en bestemt retning for gradienten i alle enheter for vinkler eller med nøkkelord `top`, `left`, `right`, `bottom` eller deres kombinasjon. Rekkefølgen på ordene spiller ingen rolle. Parameteren er valgfri: hvis den ikke skrives, vil gradienten gå fra topp til bunn. Før retningen settes ordet `to`.
vinkel	Vinkel i alle enheter for vinkler. Kan være positiv eller negativ. Parameteren er valgfri. Samtidig kan enten vinkel eller retning angis (eller ingenting).
farge1	Startfargen på gradienten i alle enheter for farge.
farge2	Sluttfargen på gradienten i alle enheter for farge.
størrelse	Setter utstrekningen til en bestemt farge i gradienten i alle enheter for størrelse.

Eksempel . Den enkleste varianten

Gradienten vil se slik ut: fra 0px til 20px ren rød farge, fra 20px til 40px - gradient fra rød til blå. Og dette vil gjentas fra topp til bunn (det er det en repeterende gradient er for):

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

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

Eksempel . Klare farger

Gradienten vil se slik ut: fra 0px til 20px ren rød farge, fra 20px til 40px - ren blå farge (knekken er at den andre fargen starter der den første slutter). Og dette vil gjentas fra topp til bunn:

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

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

Eksempel . Endre retning

Nå vil retningen på gradienten være fra høyre til venstre:

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

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

Eksempel . Retning i grader

Som retning setter vi en vinkel i grader:

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

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

Eksempel . Negativ verdi

La oss sette retningen med en negativ verdi:

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

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

Se også

funksjonen repeating-radial-gradient,
som lager en repeterende radiell gradient
funksjonen linear-gradient,
som lager en lineær gradient
funksjonen radial-gradient,
som lager en radiell gradient