radial-gradient-funktio

Funktio radial-gradient määrittää radiaalisen gradientin. Tätä funktiota käytetään ominaisuuksiin, jotka määrittävät taustakuvan: background, background-image tai reunuksen kuvan: border-image, background-image-source.

Syntaksi

valitsija {
	background: radial-gradient([muoto tyyppi sijainti], väri1 koko1, väri2 koko2...);
}

Arvot

Arvo	Kuvaus
muoto	Hyväksytyt arvot: `ellipse` elliptinen gradientti (oletusarvo), `circle` pyöreä gradientti.
tyyppi	Määrittää gradientin venytyksen. Hyväksytyt arvot: `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`.
sijainti	Avainsanan `at` jälkeen määritetään sijainti millä tahansa kooksi tarkoitetuissa yksiköissä tai avainsanojen `top`, `bottom`, `left`, `right`, `center` avulla eri yhdistelmin.
väri1	Gradientin aloitusväri millä tahansa väriyksiköissä.
väri2	Gradientin lopetusväri millä tahansa väriyksiköissä.
koko	Määrittää tietyn gradientin värin laajuuden missä tahansa kooksi tarkoitetuissa yksiköissä.

Tyyppien arvot

Arvo	Kuvaus
`closest-side`	Gradientin muoto vastaa lähintä lohkon sivua.
`closest-corner`	Gradientin muoto lasketaan perustuen tietoon lähimmästä lohkon kulmasta.
`farthest-side`	Gradientti leviää lohkon kaukaiselle puolelle.
`farthest-corner`	Gradientin muoto lasketaan perustuen tietoon kaukaisesta lohkon kulmasta.

Huomio

Tyyppiä ja muotoa voi vaihtaa keskenään, mutta sijainnin täytyy mennä ensimmäisen parametrin loppuun. Gradientin tyyppi ja sen koko eivät toimi toistensa kanssa (loogisesti, nehän ristiriitaisivat). Koko voittaa.

Esimerkki . Yksinkertaisin vaihtoehto

Asetetaan vain aloitus- ja lopetusväri:

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

#elem {
	background: radial-gradient(red, blue);
	width: 200px;
	height: 200px;
}

Esimerkki . Lisätään sijainti

Asetetaan keskuksen sijainti: 30px - sisennys vasemmalta, 100px - sisennys ylhäältä:

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

#elem {
	background: radial-gradient(at 30px 100px, red, blue);
	width: 200px;
	height: 200px;
}

Esimerkki . Sijainti prosenteissa

Asetetaan keskuksen sijainti prosenteissa: 30% - sisennys vasemmalta, 50% - sisennys ylhäältä:

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

#elem {
	background: radial-gradient(at 30% 50%, red, blue);
	width: 200px;
	height: 200px;
}

Esimerkki . Sijainti avainsanalla

Voit käyttää avainsanoja top, bottom, left, right, center eri yhdistelmin. Asetetaan esimerkiksi gradientti oikealle keskelle:

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

#elem {
	background: radial-gradient(at right center, red, blue);
	width: 200px;
	height: 200px;
}

Esimerkki . Gradientin koko

Tässä tapauksessa gradientti toimii seuraavasti: 0px:sta 20px:iin on puhdasta punaista väriä, 20px:sta 60px:iin - gradientti punaisesta siniseen, 60px:n jälkeen - puhdasta sinistä:

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

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

Esimerkki . Useita värejä peräkkäin

Tässä tapauksessa gradientti toimii seuraavasti: 0px:sta 20px:iin on puhdasta punaista väriä, 20px:sta 40px:iin on puhdasta sinistä väriä, 40px:sta 60px:iin - gradientti sinisestä vihreään, 60px:n jälkeen - puhdasta vihreää:

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

#elem {
	background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
	width: 200px;
	height: 200px;
}

Esimerkki . Koko + sijainti

Asetetaan samanaikaisesti koot eri väreille ja gradientin keskuksen sijainti:

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

#elem {
	background: radial-gradient(at 30px 60px, red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

Esimerkki . Gradientin muoto

Gradientin muoto asetetaan ensimmäisellä parametrilla ja se voi saada 2 arvoa: circle (pyöreä gradientti) tai ellipse (elliptinen gradientti, oletusarvo). Miksi emme ole tähän asti nähneet elliptisiä gradientteja, vaikka se asetetaan oletusarvoisesti? Koska tähän asti lohkojen muoto on ollut neliömäinen. Jos muutamme muodon suorakaiteen muotoiseksi, näemme elliptisen gradientin:

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

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Esimerkki . Pyöreä gradientti

Tehdään pyöreä gradientti suorakaiteen muotoiseen lohkoon. Tätä varten asetetaan ensimmäisellä parametrilla gradientin muoto avainsanan circle avulla:

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

#elem {
	background: radial-gradient(circle, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Esimerkki . Lisätään sijainti

Lisätään edelliseen koodiin vielä gradientin sijainti:

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

#elem {
	background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Esimerkki . Tyyppi farthest-corner + circle

Gradientin muoto lasketaan perustuen tietoon kaukaisesta lohkon kulmasta:

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

#elem {
	background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Esimerkki . Tyyppi farthest-corner + ellipse

Gradientin muoto lasketaan perustuen tietoon kaukaisesta lohkon kulmasta:

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

#elem {
	background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Esimerkki . Tyyppi farthest-side + circle

Gradientti leviää lohkon kaukaiselle puolelle:

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

#elem {
	background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Esimerkki . Tyyppi farthest-side + ellipse

Gradientti leviää lohkon kaukaiselle puolelle:

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

#elem {
	background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Esimerkki . Tyyppi closest-corner + circle

Gradientin muoto lasketaan perustuen tietoon lähimmästä lohkon kulmasta:

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

#elem {
	background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Esimerkki . Tyyppi closest-corner + ellipse

Gradientin muoto lasketaan perustuen tietoon lähimmästä lohkon kulmasta:

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

#elem {
	background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Esimerkki . Tyyppi closest-side + circle

Gradientin muoto vastaa lähintä lohkon sivua:

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

#elem {
	background: radial-gradient(circle closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Esimerkki . Tyyppi closest-side + ellipse

Gradientin muoto vastaa lähintä lohkon sivua:

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

#elem {
	background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Katso myös

funktion linear-gradient,
joka luo lineaarisen gradientin
funktion repeating-linear-gradient,
joka luo toistuvan lineaarisen gradientin
funktion repeating-radial-gradient,
joka luo toistuvan radiaalisen gradientin