Funktionen radial-gradient
Funktionen radial-gradient anger en radiell
gradient. Denna funktion används för egenskaper som
anger en bakgrundsbild: background,
background-image
eller en kantbild: border-image,
background-image-source.
Syntax
selektor {
background: radial-gradient([form typ position], färg1 storlek1, färg2 storlek2...);
}
Värden
| Värde | Beskrivning |
|---|---|
| form |
Accepterade värden:
ellipse elliptisk gradient (standard),
circle cirkulär gradient.
|
| typ |
Anger gradientens utsträckning.
Accepterade värden:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| position |
Efter nyckelordet at
anges positionen i valfri enhet för storlek
eller med nyckelorden top, bottom,
left, right, center
i olika kombinationer.
|
| färg1 | Startfärg för gradienten i valfri enhet för färg. |
| färg2 | Slutfärg för gradienten i valfri enhet för färg. |
| storlek | Anger utsträckningen för en specifik färg i gradienten i valfri enhet för storlek. |
Värden för typ
| Värde | Beskrivning |
|---|---|
closest-side |
Gradientens form sammanfaller med den närmaste sidan av blocket. |
closest-corner |
Gradientens form beräknas baserat på information om avståndet till blockets närmaste hörn. |
farthest-side |
Gradienten sträcker sig till blockets bortre sida. |
farthest-corner |
Gradientens form beräknas baserat på information om avståndet till blockets bortre hörn. |
Anmärkning
Typ och form kan byta plats, men positionen måste komma i slutet av den första parametern. Gradienttyp och dess storlek fungerar inte tillsammans (logiskt, eftersom de konflikterar). Storleken vinner.
Exempel . Enklaste varianten
Låt oss bara ange start- och slutfärg:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Exempel . Lägger till position
Låt oss ange centrums position:
30px - indrag från vänster, 100px - indrag från toppen:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Exempel . Position i procent
Låt oss ange centrums position i procent:
30% - indrag från vänster, 50% - indrag från toppen:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Exempel . Position med nyckelord
Man kan använda nyckelorden
top, bottom, left,
right, center i olika
kombinationer. Låt oss till exempel placera gradienten
till höger i mitten:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Exempel . Gradientens storlek
I detta fall kommer gradienten att fungera så här:
från 0px till 20px kommer ren
röd färg, från 20px till 60px - gradient
från röd till blå, efter 60px - ren
blå färg:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Exempel . Flera färger i rad
I detta fall kommer gradienten att fungera så här:
från 0px till 20px kommer ren
röd färg, från 20px till 40px
kommer ren blå färg, från 40px
till 60px - gradient från blå till 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;
}
:
Exempel . Storlek + position
Låt oss samtidigt ange storlekar för olika färger och position för gradientens centrum:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Exempel . Gradientens form
Gradientens form anges med den första parametern
och kan ta 2 värden: circle
(cirkulär gradient) eller ellipse (elliptisk
gradient, standard). Varför har vi då inte sett
elliptiska gradienter tidigare, trots att
den är standard? Eftersom blockens form tidigare
var kvadratisk. Om vi ändrar formen till rektangulär
ser vi den elliptiska gradienten:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exempel . Rund gradient
Låt oss skapa en cirkulär gradient i ett rektangulärt
block. För att göra detta anger vi gradientens form
som första parameter med nyckelordet
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exempel . Lägger till position
Låt oss till den föregående koden lägga till gradientens position:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Exempel . Typen farthest-corner + circle
Gradientens form beräknas baserat på information om avståndet till blockets bortre hörn:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exempel . Typen farthest-corner + ellipse
Gradientens form beräknas baserat på information om avståndet till blockets bortre hörn:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exempel . Typen farthest-side + circle
Gradienten sträcker sig till blockets bortre sida:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exempel . Typen farthest-side + ellipse
Gradienten sträcker sig till blockets bortre sida:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exempel . Typen closest-corner + circle
Gradientens form beräknas baserat på information om avståndet till blockets närmaste hörn:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exempel . Typen closest-corner + ellipse
Gradientens form beräknas baserat på information om avståndet till blockets närmaste hörn:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exempel . Typen closest-side + circle
Gradientens form sammanfaller med den närmaste sidan av blocket:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Exempel . Typen closest-side + ellipse
Gradientens form sammanfaller med den närmaste sidan av blocket:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Se även
-
funktionen
linear-gradient,
som skapar en linjär gradient -
funktionen
repeating-linear-gradient,
som skapar en upprepande linjär gradient -
funktionen
repeating-radial-gradient,
som skapar en upprepande radiell gradient
