CSS repeating-linear-gradient() -funktio

Edellinen sivu CSS repeating-conic-gradient() funktio
Seuraava sivu CSS repeating-radial-gradient() funktio
Palaa yhdellä tasolla ylös CSS funktioviittauskäsikirja

määrittely ja käyttö

CSS toistuva-lineaarinen-gradientti Funktiota käytetään toistuvaan lineaariseen peittojaksoon.

esimerkiksi:

lineaarinen peittojakso	toistuva lineaarinen peittojakso

linear-gradient(red, yellow, blue);	repeating-linear-gradient(red, yellow 10%, blue 20%);

esimerkki

Esimerkki 1

Yksi toistuva lineaarinen väriainekka:

#grad {
  background-image: toistuva-lineaarinen-gradientti(punainen, keltainen 10%, vihreä 20%);
}

Kokeile itse

Esimerkki 2

Eri toistuvia lineaarisia väriainekka:

#grad1 {
  background-image: toistuva-lineaarinen-gradientti(45deg, punainen, sininen 7%, vihreä 10%);
}
#grad2 {
  background-image: toistuva-lineaarinen-gradientti(190deg, punainen, sininen 7%, vihreä 10%);
}
#grad3 {
  background-image: toistuva-lineaarinen-gradientti(90deg, punainen, sininen 7%, vihreä 10%);
}

Kokeile itse

CSS syntaksi

toistuva-lineaarinen-gradientti(angle to side-or-corner, color-stop1, color-stop2, ...);

Arvo	Kuvaus
angle	Määritellään gradientin suunta-aste. Arvot ovat 0deg - 360deg välillä. Oletusarvo on 180deg.
side-or-corner	Määritellään gradientin lähtöaseman sijainti. Se koostuu kahdesta avainsanasta: ensimmäinen osoittaa horisontaalisen suunnan (vasen tai oikea), toinen osoittaa vertikaalisen suunnan (ylä tai alhaalta). Järjestys ei ole tärkeää, ja jokainen avainsana on valinnainen.
color-stop1, color-stop2,...	Väripäätteen värit ovat niitä värejä, joita haluat näyttää pehmeässä siirtymässä. Arvo koostuu väriarvosta ja yhdestä tai kahdesta valinnaisesta pysähtymispaikasta (0% - 100% välinen prosenttiosuus tai pituus gradientin akselilla).

Arvo

Kuvaus

angle

Määritellään gradientin suunta-aste. Arvot ovat 0deg - 360deg välillä. Oletusarvo on 180deg.

side-or-corner

Määritellään gradientin lähtöaseman sijainti.

Se koostuu kahdesta avainsanasta: ensimmäinen osoittaa horisontaalisen suunnan (vasen tai oikea), toinen osoittaa vertikaalisen suunnan (ylä tai alhaalta).

Järjestys ei ole tärkeää, ja jokainen avainsana on valinnainen.

color-stop1, color-stop2,...

Väripäätteen värit ovat niitä värejä, joita haluat näyttää pehmeässä siirtymässä.

Arvo koostuu väriarvosta ja yhdestä tai kahdesta valinnaisesta pysähtymispaikasta (0% - 100% välinen prosenttiosuus tai pituus gradientin akselilla).