Funktionen radial-gradient
Funktionen radial-gradient angiver en radial
gradient. Denne funktion anvendes på egenskaber, der
angiver en baggrundsbillede: background,
background-image
eller en ramme-billede: border-image,
background-image-source.
Syntaks
selektor {
background: radial-gradient([form type position], farve1 størrelse1, farve2 størrelse2...);
}
Værdier
| Værdi | Beskrivelse |
|---|---|
| form |
Accepterede værdier:
ellipse elliptisk gradient (standard),
circle cirkulær gradient.
|
| type |
Angiver gradientens udstrækning.
Accepterede værdier:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| position |
Efter nøgleordet at
angives en position i enhver enhed for størrelse
eller ved hjælp af nøgleordene top, bottom,
left, right, center
i forskellige kombinationer.
|
| farve1 | Startfarven for gradienten i enhver enhed for farve. |
| farve2 | Slutfarven for gradienten i enhver enhed for farve. |
| størrelse | Angiver udstrækningen af en bestemt farve i gradienten i enhver enhed for størrelse. |
Værdier for type
| Værdi | Beskrivelse |
|---|---|
closest-side |
Gradientens form falder sammen med den side af blokken, der er tættest på den. |
closest-corner |
Gradientens form beregnes på basis af information om afstanden til det nærmeste hjørne af blokken. |
farthest-side |
Gradienten strækker sig til den fjerneste side af blokken. |
farthest-corner |
Gradientens form beregnes på basis af information om afstanden til det fjerneste hjørne af blokken. |
Bemærkning
Type og form kan byttes om, men positionen skal være i slutningen af den første parameter. Gradienttype og dens størrelse fungerer ikke sammen (logisk, da de jo konflikter). Størrelsen vinder.
Eksempel . Den enkleste variant
Lad os blot angive start- og slutfarve:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Eksempel . Tilføj position
Lad os angive centrumspositionen:
30px - indrykning fra venstre, 100px - indrykning fra toppen:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Eksempel . Position i procenter
Lad os angive centrumspositionen i procenter:
30% - indrykning fra venstre, 50% - indrykning fra toppen:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Eksempel . Position med nøgleord
Man kan bruge nøgleordene
top, bottom, left,
right, center i forskellige
kombinationer. Lad os for eksempel placere gradienten
til højre i centrum:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Eksempel . Gradientens størrelse
I dette tilfælde vil gradienten fungere sådan:
fra 0px til 20px vil der være ren
rød farve, fra 20px til 60px - gradient
fra rød til blå, efter 60px - ren
blå farve:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Eksempel . Flere farver i træk
I dette tilfælde vil gradienten fungere sådan:
fra 0px til 20px vil der være ren
rød farve, fra 20px til 40px
vil der være ren blå farve, fra 40px
til 60px - gradient fra blå til grøn,
efter 60px - ren grøn:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Eksempel . Størrelse + position
Lad os samtidig angive størrelser for forskellige farver og positionen for gradientens centrum:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Eksempel . Gradientens form
Gradientens form angives med den første parameter
og kan tage 2 værdier: circle
(cirkulær gradient) eller ellipse (elliptisk
gradient, standard). Hvorfor har vi så ikke set elliptiske
gradienter før, selvom
den angives som standard? Fordi blokkene indtil nu
har været kvadratiske. Hvis vi ændrer
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
Lad os lave en cirkulær gradient i en rektangulær
blok. For at gøre dette angiver vi
gradientens form med nøgleordet
circle som den første parameter:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Eksempel . Tilføj position
Lad os til den forrige kode tilføje gradientens position:
<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 på basis af information om afstanden til blokkens fjerneste hjørne:
<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 på basis af information om afstanden til blokkens fjerneste hjørne:
<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 strækker sig til blokkens fjerneste side:
<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 strækker sig til blokkens fjerneste side:
<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 på basis af information om afstanden til blokkens nærmeste hjørne:
<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 på basis af information om afstanden til blokkens nærmeste hjørne:
<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 falder sammen med den side af blokken, der er tættest på den:
<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 falder sammen med den side af blokken, der er tættest på den:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Se også
-
funktionen
linear-gradient,
som skaber en lineær gradient -
funktionen
repeating-linear-gradient,
som skaber en gentaget lineær gradient -
funktionen
repeating-radial-gradient,
som skaber en gentaget radial gradient
