Referenz:CSS/Eigenschaften/radial-gradient

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft radial-gradient() CSS 3.0
Beschreibung legt einen radialen Farbverlauf fest
erlaubte Werte

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
default-Wert

none

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Spezifikation W3c logo klein.gif radial-gradients
Beispiel
#eins {
  background-image: radial-gradient(circle closest-side at center, gold 20%, yellow 30%, dimgray 60%);
}
#zwei {
  background-image: radial-gradient(circle closest-corner at center, gold 20%, yellow 30%, dimgray 60%);
}
#drei {
  background-image: radial-gradient(circle farthest-side at center, gold 20%, yellow 30%, dimgray 60%);
}
#vier {
  background-image: radial-gradient(circle farthest-corner at center, gold 20%, yellow 30%, dimgray 60%);
}
#fuenf {
  background-image: radial-gradient(closest-side at center 70%, gold 20%, yellow 30%, dimgray 60%);
}
Beachten Sie

{{{Hinweis}}}

Tipp