⌘K

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

cssvelger {
  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): 

html<div id="elem"></div>
css#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: 

html<div id="elem"></div>
css#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: 

html<div id="elem"></div>
css#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: 

html<div id="elem"></div>
css#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: 

html<div id="elem"></div>
css#elem {
  background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
  width: 400px;
  height: 200px;
}

Результат:

Se også

BackFunksjonen radial-gradientNextFunksjonen repeating-radial-gradient