Die radial-gradient()-Funktion legt einen radialen Farbverlauf fest.
| Parameter
|
Die Funktion erwartet folgende Argumente:
- eine Form (shape)
ellipse (Standardwert) oder circle
- mindestens zwei „Color-Stop“-Angaben
- Ein „Color-Stop“ besteht aus einer Farb- und einer Längenangabe und legt fest, welche Farbe an welcher Stelle des Verlaufs dargestellt werden soll.
- Fehlen die Längenangaben, so wird die zur Verfügung stehende Breite in soviele Teile geteilt, wie Farbübergänge vorhanden sind.
-
radial-gradient(red, green, red) = radial-gradient(red 0, green 50%, red 100%)
- Auf die Angaben
0 und 100% kann grundsätzlich verzichtet werden, ggf. ebenso auf einen ersten und letzten Color-Stop.
-
radial-gradient(red 0, green 50%, red 100%) = radial-gradient(red, green 50%, red)
-
radial-gradient(red, red 25%, green 75%, green) = radial-gradient(red 25%, green 75%)
- scharfe Übergänge erreicht man durch die Festlegung zweier Farben an einem Ort
- die Größe der Endform (extent-keyword)
-
closest-side, Die Endform trifft auf die der Mitte nächstgelegene Seite (für circle) oder trifft auf vertikale und horizontale Seiten (für ellipse)
-
closest-corner, Endform trifft nächste Ecke
-
farthest-side, trifft auf die der Mitte am weitesten entfernten Seite
-
farthest-corner, (Standardwert) trifft auf die am weitesten entfernte Ecke
|
| anwendbar auf
|
background-image, border-image, list-style-image, mask-image
|
| Browsersupport
|
caniuse: css-gradients
|
Beispiel
#eins {
background-image: radial-gradient(circle closest-side at center, gold 20%, yellow 30%, dimgray 60%);
}
#fuenf {
background-image: radial-gradient(closest-side at center 70%, gold 20%, yellow 30%, dimgray 60%);
}
Weblinks
Siehe auch
