Funksjonen radial-gradient
Funksjonen radial-gradient setter en radiell
gradient. Denne funksjonen brukes på egenskaper som
setter bakgrunnsbilde: background,
background-image
eller rammebilde: border-image,
background-image-source.
Syntaks
velger {
background: radial-gradient([form type posisjon], farge1 størrelse1, farge2 størrelse2...);
}
Verdier
| Verdi | Beskrivelse |
|---|---|
| form |
Aksepterte verdier:
ellipse elliptisk gradient (standard),
circle sirkulær gradient.
|
| type |
Setter gradientens utstrekning.
Aksepterte verdier:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| posisjon |
Etter nøkkelordet at
angis en posisjon i alle enheter for størrelse
eller ved hjelp av nøkkelord top, bottom,
left, right, center
i ulike kombinasjoner.
|
| farge1 | Startfargen på gradienten i alle enheter for farge. |
| farge2 | Sluttfargen på gradienten i alle enheter for farge. |
| størrelse | Setter utstrekningen til en bestemt farge i gradienten i alle enheter for størrelse. |
Verdier for type
| Verdi | Beskrivelse |
|---|---|
closest-side |
Gradientens form sammenfaller med den nærmeste siden til blokken. |
closest-corner |
Gradientens form beregnes basert på informasjon om avstanden til nærmeste hjørne av blokken. |
farthest-side |
Gradienten strekker seg til den fjerneste siden av blokken. |
farthest-corner |
Gradientens form beregnes basert på informasjon om avstanden til det fjerneste hjørnet av blokken. |
Merknad
Type og form kan byttes om, men posisjon må komme til slutt i den første parameteren. Gradienttype og dens størrelse fungerer ikke sammen (logisk, de konflikter jo). Størrelsen vinner.
Eksempel . Den enkleste varianten
La oss bare sette start- og sluttfarge:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Eksempel . Legger til posisjon
La oss sette senterets plassering:
30px - innrykk fra venstre, 100px - innrykk fra toppen:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Eksempel . Posisjon i prosent
La oss sette senterets plassering i prosent:
30% - innrykk fra venstre, 50% - innrykk fra toppen:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Eksempel . Posisjon med nøkkelord
Man kan bruke nøkkelord
top, bottom, left,
right, center i ulike
kombinasjoner. La oss for eksempel plassere gradienten
til høyre i senter:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Eksempel . Gradientens størrelse
I dette tilfellet vil gradienten fungere slik:
fra 0px til 20px vil det være ren
rød farge, fra 20px til 60px - gradient
fra rød til blå, etter 60px - ren
blå farge:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Eksempel . Flere farger etter hverandre
I dette tilfellet vil gradienten fungere slik:
fra 0px til 20px vil det være ren
rød farge, fra 20px til 40px
vil det være ren blå farge, fra 40px
til 60px - gradient fra blå til grønn,
etter 60px - ren grønn farge:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Eksempel . Størrelse + posisjon
La oss samtidig sette størrelser for ulike farger og posisjonen til gradientens senter:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Eksempel . Gradientens form
Gradientens form settes med den første parameteren
og kan ta 2 verdier: circle
(sirkulær gradient) eller ellipse (elliptisk
gradient, standard). Hvorfor har vi ikke sett elliptiske
gradienter før dette, selv om
den settes som standard? Fordi inntil nå
har formen på blokkene vært kvadratisk. Hvis vi endrer
formen til rektangulær, vil vi se en elliptisk
gradient:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Eksempel . Rund gradient
La oss lage en rund gradient i en rektangulær
blokk. For å gjøre dette setter vi gradientens form
med nøkkelordet
circle som første parameter:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Eksempel . Legger til posisjon
La oss til den forrige koden legge til gradientens posisjon:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Eksempel . Type farthest-corner + circle
Gradientens form beregnes basert på informasjon om avstanden til det fjerneste hjørnet i blokken:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Eksempel . Type farthest-corner + ellipse
Gradientens form beregnes basert på informasjon om avstanden til det fjerneste hjørnet i blokken:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Eksempel . Type farthest-side + circle
Gradienten strekker seg til den fjerneste siden av blokken:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Eksempel . Type farthest-side + ellipse
Gradienten strekker seg til den fjerneste siden av blokken:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Eksempel . Type closest-corner + circle
Gradientens form beregnes basert på informasjon om avstanden til nærmeste hjørne i blokken:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Eksempel . Type closest-corner + ellipse
Gradientens form beregnes basert på informasjon om avstanden til nærmeste hjørne i blokken:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Eksempel . Type closest-side + circle
Gradientens form sammenfaller med den nærmeste siden til blokken:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Eksempel . Type closest-side + ellipse
Gradientens form sammenfaller med den nærmeste siden til blokken:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Se også
-
funksjonen
linear-gradient,
som lager en lineær gradient -
funksjonen
repeating-linear-gradient,
som lager en repeterende lineær gradient -
funksjonen
repeating-radial-gradient,
som lager en repeterende radiell gradient
