CSS radial-gradient()-Funktion

CSS-Funktionen

Beispiel

Das folgende Beispiel zeigt einen radialen Farbverlauf - Farbstopps gleichmäßig verteilt:

#grad { background-image: radial-gradient(red, green, blue); }

Selbst ausprobieren »

Definition und Verwendung

Die radial-gradient()-Funktion verwendet einen radialen Farbverlauf, um ein "Bild" zu erzeugen.

Ein radialer Farbverlauf wird durch seinen Mittelpunkt definiert.

Um einen radialen Farbverlauf zu erstellen, müssen Sie zwei Farbstopps festlegen.

Beispiel für radialen Farbverlauf

Unterstützte Version: CSS3

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversionsnummer an, die die Funktion unterstützt.

Die von "webkit", "moz" oder "o" angegebene Nummer ist die erste Versionsnummer mit Präfix, die die Funktion unterstützt.

Funktion
radial-gradient() 26.0
10.0 -webkit-		 10.0 16.0
3.6 -moz-		 6.1
5.1 -webkit-		 12.1
11.6 -o-

CSS-Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Wert Beschreibung
shape Bestimmen Sie den Kreistyp:
  • ellipse (Standard): Gibt einen elliptischen radialen Farbverlauf an.
  • circle: Gibt einen kreisförmigen radialen Farbverlauf an.
size Definiert die Größe des Farbverlaufs. Mögliche Werte:
  • farthest-corner (Standard): Gibt die Radiuslänge des radialen Farbverlaufs als Abstand vom Mittelpunkt zur am weitesten entfernten Ecke vom Mittelpunkt an.
  • closest-side: Gibt die Radiuslänge des radialen Farbverlaufs als Abstand vom Mittelpunkt zur nächstgelegenen Seite vom Mittelpunkt an.
  • closest-corner: Gibt die Radiuslänge des radialen Farbverlaufs als Abstand vom Mittelpunkt zur nächstgelegenen Ecke vom Mittelpunkt an.
  • farthest-side: Gibt die Radiuslänge des radialen Farbverlaufs als Abstand vom Mittelpunkt zur am weitesten entfernten Seite vom Mittelpunkt an.
position Definiert die Position des Farbverlaufs. Mögliche Werte:
  • center(Standard): Legt die Mitte als y-Koordinatenwert des Mittelpunkts des radialen Farbverlaufs fest.
  • top: Legt den y-Koordinatenwert mit dem oberen Rand als Mittelpunkt des radialen Farbverlaufs fest.
  • bottom: Legt den y-Koordinatenwert mit dem unteren Rand als Mittelpunkt des radialen Farbverlaufs fest.
start-color, ..., last-color Wird verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben.

Weitere Beispiele

Beispiel

Ungleichmäßig verteilte Farbstopps:

#grad { background-image: radial-gradient(red 5%, green 15%, blue 60%); }

Selbst ausprobieren »

Beispiel

Kreisförmiger radialer Farbverlauf:

#grad { background-image: radial-gradient(circle, red, yellow, green); }

Selbst ausprobieren »

Beispiel

Verwendung verschiedener Größen-Schlüsselwörter:

#grad1 { background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black); } #grad2 { background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black); }

Selbst ausprobieren »

CSS-Tutorial:CSS3-Verläufe

CSS-Funktionen

Weitere Erweiterungen