CSS radial-gradient() Funktion

Definition und Verwendung

CSS radial-gradient() Die Funktion setzt den radialen Verlauf als Hintergrundbild.

Der radiale Verlauf wird durch seinen Mittelpunkt definiert.

Um einen radialen Verlauf zu erstellen, müssen mindestens zwei Farbmarken definiert werden.

Radialer Verlauf Beispiel:

Beispiel

Beispiel 1

Farbverteilung gleichmäßig verteilter radialer Verlauf:

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

Versuchen Sie es selbst

Beispiel 2

Farbverteilung verschiedener radialer Verlaufs:

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

Versuchen Sie es selbst

Beispiel 3

Kreisförmige Form des radialen Farbverlaufs:

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

Versuchen Sie es selbst

Beispiel 4

Verwenden Sie verschiedene Größen-Keywords für den radialen Farbverlauf:

#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);
}

Versuchen Sie es selbst

CSS Syntax

radial-gradient(shape size at position, start-color, ... , last-color);

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser-Version dar, die diese Funktion vollständig unterstützt.

Verwandte Seiten

Anleitung:CSS Farbverlauf

Referenz:CSS-background-image-Eigenschaft

Referenz:CSS konischer Farbverlaufs() Funktion

Referenz:CSS linearen Farbverlaufs() Funktion

Referenz:CSS wiederholender konischer Farbverlaufs() Funktion

Referenz:CSS wiederholender linearen Farbverlaufs() Funktion

Referenz:Bezug: CSS repeating-radial-gradient() Funktion