CSS repeating-radial-gradient() -funktio

Määrittely ja käyttö

CSS toistuva-sätekiertogradient() Funktio toistuva suuntainen säteensävy.

Suuntainen säteensävy	Toistuva suuntainen säteensävy

radial-gradient(red, yellow, green);	repeating-radial-gradient(red, yellow 10%, green 15%);

Yksi toistuva suuntainen säteensävy:

#grad {
  background-image: toistuva-sätekiertogradient(punainen, keltainen 10%, vihreä 15%);
}

Toinen toistuva sätekiertogradient, jossa on asetettu muoto, kokoon ja sijainti:

#grad1 {
  background-image: toistuva-sätekiertogradient(ellipse farthest-corner at 25% 25%, punainen, keltainen 10%, vihreä 15%);
}

Toinen toistuva sätekiertogradient, jossa on asetettu kaksi väri päätösasemaa:

#grad1 {
  background-image: toistuva-sätekiertogradient(punainen 0% 10%, keltainen 11% 21%, vihreä 22% 32%);
}

toistuva-sätekiertogradient(muoto kokoon at sijainti, alku-väri, ... , viimeinen-väri);

arvo	kuvaus
muoto	Määrittelee gradientin muodon. Mahdolliset arvot: ellipse（oletusarvo） circle
kokoon	Määrittelee gradientin kokoon. Mahdolliset arvot: farthest-corner（oletusarvo） closest-side closest-corner farthest-side
at sijainti	Määrittelee gradientin sijainnin. Oletusarvo on "center".
alku-väri, ... , viimeinen-väri	Väri päätös on väri, jonka haluat näyttää pehmeässä siirtymässä. Arvo koostuu väriarvosta ja yhdestä tai kahdesta valinnaisesta pysäytysasemasta (0% - 100% välinen prosenttiosuus tai pituus gradientin akselilla).