Die radial-gradient funksie
Die funksie radial-gradient spesifiseer 'n radiale
gradiënt. Hierdie funksie word toegepas op eienskappe wat
die agtergrondbeeld spesifiseer: background,
background-image
of die randbeeld: border-image,
background-image-source.
Sintaksis
selektor {
background: radial-gradient([vorm tipe posisie], kleur1 grootte1, kleur2 grootte2...);
}
Waardes
| Waarde | Beskrywing |
|---|---|
| vorm |
Aanvaarbare waardes:
ellipse elliptiese gradiënt (verstek),
circle sirkelvormige gradiënt.
|
| tipe |
Spesifiseer die uitrekking van die gradiënt.
Aanvaarbare waardes:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| posisie |
Na die sleutelwoord at
word die posisie in enige eenhede vir grootte
aangedui of met behulp van die sleutelwoorde top, bottom,
left, right, center
in verskeie kombinasies.
|
| kleur1 | Begin kleur van die gradiënt in enige eenhede vir kleur. |
| kleur2 | Eindkleur van die gradiënt in enige eenhede vir kleur. |
| grootte | Spesifiseer die omvang van 'n spesifieke kleur van die gradiënt in enige eenhede vir grootte. |
Waardes vir tipe
| Waarde | Beskrywing |
|---|---|
closest-side |
Die vorm van die gradiënt pas by die naaste sy van die blok. |
closest-corner |
Die vorm van die gradiënt word bereken op grond van inligting oor die afstand na die naaste hoek van die blok. |
farthest-side |
Die gradiënt strek tot by die verste sy van die blok. |
farthest-corner |
Die vorm van die gradiënt word bereken op grond van inligting oor die afstand na die verste hoek van die blok. |
Opmerking
Die tipe en vorm kan omgeruil word, maar die posisie moet aan die einde van die eerste parameter wees. Die tipe gradiënt en sy grootte werk nie saam nie (logies, want hulle bots). Die grootte wen.
Voorbeeld . Die mees basiese opsie
Laat ons net die begin- en eindkleur spesifiseer:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Voorbeeld . Voeg posisie by
Laat ons die middelpunt se posisie spesifiseer:
30px - inkeping links, 100px - inkeping bo:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Voorbeeld . Posisie in persentasies
Laat ons die middelpunt se posisie in persentasies spesifiseer:
30% - inkeping links, 50% - inkeping bo:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Voorbeeld . Posisie met sleutelwoord
Jy kan die sleutelwoorde gebruik
top, bottom, left,
right, center in verskeie
kombinasies. Plaas byvoorbeeld die gradiënt
regs in die middel:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Voorbeeld . Grootte van die gradiënt
In hierdie geval sal die gradiënt so werk:
van 0px tot 20px sal suiwer
rooi kleur wees, van 20px tot 60px - gradiënt
van rooi na blou, na 60px - suiwer
blou:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Voorbeeld . Verskeie kleure agter mekaar
In hierdie geval sal die gradiënt so werk:
van 0px tot 20px sal suiwer
rooi kleur wees, van 20px tot 40px
sal suiwer blou kleur wees, van 40px
tot 60px - gradiënt van blou na groen,
na 60px - suiwer groen:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Voorbeeld . Grootte + posisie
Laat ons gelyktydig die groottes vir verskillende kleure spesifiseer en die posisie van die gradiënt se middelpunt:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Voorbeeld . Vorm van die gradiënt
Die vorm van die gradiënt word deur die eerste parameter
gespesifiseer en kan 2 waardes aanneem: circle
(sirkelvormige gradiënt) of ellipse (elliptiese
gradiënt, verstek). Hoekom het ons nie tot dusver
elliptiese gradiënte gesien nie, alhoewel
dit verstek is? Omdat die vorm van die blokke tot dusver
vierkantig was. As ons die vorm na reghoekig verander,
sal ons die elliptiese gradiënt sien:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Voorbeeld . Rond gradiënt
Laat ons 'n ronde gradiënt in 'n reghoekige
blok maak. Om dit te doen, spesifiseer ons die
gradiënt se vorm as die eerste parameter
met die sleutelwoord
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Voorbeeld . Voeg posisie by
Laat ons by die vorige kode ook die gradiënt se posisie byvoeg:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Voorbeeld . Tipe farthest-corner + circle
Die vorm van die gradiënt word bereken op grond van inligting oor die afstand na die verste hoek van die blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Tipe farthest-corner + ellipse
Die vorm van die gradiënt word bereken op grond van inligting oor die afstand na die verste hoek van die blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Tipe farthest-side + circle
Die gradiënt strek tot by die verste sy van die blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Tipe farthest-side + ellipse
Die gradiënt strek tot by die verste sy van die blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Tipe closest-corner + circle
Die vorm van die gradiënt word bereken op grond van inligting oor die afstand na die naaste hoek van die blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Tipe closest-corner + ellipse
Die vorm van die gradiënt word bereken op grond van inligting oor die afstand na die naaste hoek van die blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Tipe closest-side + circle
Die vorm van die gradiënt pas by die naaste sy van die blok:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Voorbeeld . Tipe closest-side + ellipse
Die vorm van die gradiënt pas by die naaste sy van die blok:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Sien ook
-
die funksie
linear-gradient,
wat 'n lineêre gradiënt skep -
die funksie
repeating-linear-gradient,
wat 'n herhalende lineêre gradiënt skep -
die funksie
repeating-radial-gradient,
wat 'n herhalende radiale gradiënt skep
