CSS radial-gradient() -funktio

Edellinen sivu CSS pow() funktio
Seuraava sivu CSS ray() funktio
Palaa yhdellä tasolla ylös CSS funktioviittauskäsikirja

Määrittely ja käyttö

CSS radial-gradient() Funktiot asettavat radiaalisen pehmennyksen taustakuvaksi.

Radiaalinen pehmennys määritellään sen keskellä.

Radiaalisen pehmennyksen luomiseksi on määritettävä vähintään kaksi väriasteikkoa.

Radiaalinen pehmennys esimerkki:

Esimerkki

Esimerkki 1

Väriasteikkoja yhtämittaisesti jaettu radiaalinen pehmennys:

#grad {
  background-image: radial-gradient(red, green, blue);
}

Kokeile itse

Esimerkki 2

Eri värejä jaettu radiaalinen pehmennys:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

Kokeile itse

Esimerkki 3

Kehämäisen muodon radial gradienti:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Kokeile itse

Esimerkki 4

Käytä erilaisia kokoonpanokysymyksiä radial gradientissa:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

Kokeile itse

CSS syntaksi

radial-gradient(shape size at position, start-color, ... , last-color);

arvo	kuvaus
shape	Määrittää gradientin muodon. Mahdolliset arvot: ellipse（oletusarvo） circle
size	Määrittää gradientin kokoon. Mahdolliset arvot: farthest-corner（oletusarvo） closest-side closest-corner farthest-side
position	Määrittää gradientin sijainnin. Oletusarvo on "center".
start-color, ... , last-color	Värimerkki on väri, jonka haluat näkyvän pehmeänä siirtymänä. Arvo koostuu yhdestä väriarvosta, jonka jälkeen seuraa yksi tai kaksi valinnaisesta värimerkkin sijainnista (0% - 100% välinen prosenttiosuus tai pituus gradientin akselilla).