Funktion radial-gradient
Die Funktion radial-gradient erzeugt einen radialen
Farbverlauf. Diese Funktion wird auf Eigenschaften angewendet, die
ein Hintergrundbild festlegen: background,
background-image
oder ein Rahmenbild: border-image,
background-image-source.
Syntax
Selektor {
background: radial-gradient([Form Typ Position], Farbe1 Größe1, Farbe2 Größe2...);
}
Werte
| Wert | Beschreibung |
|---|---|
| Form |
Mögliche Werte:
ellipse elliptischer Verlauf (Standard),
circle kreisförmiger Verlauf.
|
| Typ |
Legt die Ausdehnung des Verlaufs fest.
Mögliche Werte:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| Position |
Nach dem Schlüsselwort at
wird eine Position in beliebigen Größeneinheiten
oder mit den Schlüsselwörtern top, bottom,
left, right, center
in verschiedenen Kombinationen angegeben.
|
| Farbe1 | Startfarbe des Verlaufs in beliebigen Farbangaben. |
| Farbe2 | Endfarbe des Verlaufs in beliebigen Farbangaben. |
| Größe | Legt die Ausdehnung einer bestimmten Farbe des Verlaufs in beliebigen Größeneinheiten fest. |
Werte für Typ
| Wert | Beschreibung |
|---|---|
closest-side |
Die Form des Verlaufs entspricht der ihm nächsten Seite des Blocks. |
closest-corner |
Die Form des Verlaufs wird auf der Grundlage der Entfernung zur nächsten Blockecke berechnet. |
farthest-side |
Der Verlauf erstreckt sich bis zur entferntesten Seite des Blocks. |
farthest-corner |
Die Form des Verlaufs wird auf der Grundlage der Entfernung zur entferntesten Blockecke berechnet. |
Hinweis
Typ und Form können vertauscht werden, aber die Position muss am Ende des ersten Parameters stehen. Der Verlaufstyp und seine Größe funktionieren nicht miteinander (logisch, da sie in Konflikt stehen). Die Größe hat Vorrang.
Beispiel . Die einfachste Variante
Lassen Sie uns einfach eine Start- und Endfarbe festlegen:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Beispiel . Position hinzufügen
Lassen Sie uns die Mittelpunktposition festlegen:
30px - Abstand links, 100px - Abstand oben:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Beispiel . Position in Prozent
Lassen Sie uns die Mittelpunktposition in Prozent angeben:
30% - Abstand links, 50% - Abstand oben:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Beispiel . Position mit Schlüsselwörtern
Man kann die Schlüsselwörter
top, bottom, left,
right, center in verschiedenen
Kombinationen verwenden. Setzen wir den Verlauf zum Beispiel
rechts in die Mitte:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Beispiel . Größe des Verlaufs
In diesem Fall funktioniert der Verlauf wie folgt:
von 0px bis 20px gibt es reine
rote Farbe, von 20px bis 60px - Verlauf
von rot zu blau, nach 60px - reines
blau:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Beispiel . Mehrere Farben hintereinander
In diesem Fall funktioniert der Verlauf wie folgt:
von 0px bis 20px gibt es reine
rote Farbe, von 20px bis 40px
gibt es reine blaue Farbe, von 40px
bis 60px - Verlauf von blau zu grün,
nach 60px - reines grün:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Beispiel . Größe + Position
Lassen Sie uns gleichzeitig die Größen für verschiedene Farben und die Position des Verlaufmittelpunkts festlegen:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Beispiel . Form des Verlaufs
Die Form des Verlaufs wird durch den ersten Parameter festgelegt
und kann 2 Werte annehmen: circle
(kreisförmiger Verlauf) oder ellipse (elliptischer
Verlauf, Standard). Warum haben wir bis jetzt
keine elliptischen Verläufe gesehen, obwohl
dies die Standardeinstellung ist? Weil die Form der Blöcke
bisher quadratisch war. Wenn wir die Form auf rechteckig ändern,
sehen wir einen elliptischen Verlauf:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Beispiel . Runder Verlauf
Lassen Sie uns einen runden Verlauf in einem rechteckigen
Block erstellen. Dazu legen wir die Form des Verlaufs
mit dem Schlüsselwort circle als ersten Parameter fest:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Beispiel . Position hinzufügen
Fügen wir dem vorherigen Code zusätzlich die Position des Verlaufs hinzu:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Beispiel . Typ farthest-corner + circle
Die Form des Verlaufs wird auf der Grundlage der Entfernung zur entferntesten Blockecke berechnet:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Beispiel . Typ farthest-corner + ellipse
Die Form des Verlaufs wird auf der Grundlage der Entfernung zur entferntesten Blockecke berechnet:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Beispiel . Typ farthest-side + circle
Der Verlauf erstreckt sich bis zur entferntesten Seite des Blocks:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Beispiel . Typ farthest-side + ellipse
Der Verlauf erstreckt sich bis zur entferntesten Seite des Blocks:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Beispiel . Typ closest-corner + circle
Die Form des Verlaufs wird auf der Grundlage der Entfernung zur nächsten Blockecke berechnet:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Beispiel . Typ closest-corner + ellipse
Die Form des Verlaufs wird auf der Grundlage der Entfernung zur nächsten Blockecke berechnet:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Beispiel . Typ closest-side + circle
Die Form des Verlaufs entspricht der ihm nächsten Seite des Blocks:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Beispiel . Typ closest-side + ellipse
Die Form des Verlaufs entspricht der ihm nächsten Seite des Blocks:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Siehe auch
-
die Funktion
linear-gradient,
die einen linearen Farbverlauf erzeugt -
die Funktion
repeating-linear-gradient,
die einen sich wiederholenden linearen Farbverlauf erzeugt -
die Funktion
repeating-radial-gradient,
die einen sich wiederholenden radialen Farbverlauf erzeugt
