CSS-Radial-Verlauf

CSS-Radial-Verlauf

Der radiale Verlauf wird durch seinen Mittelpunkt definiert.

Um einen radialen Verlauf zu erstellen, müssen Sie mindestens zwei Farbmarken definieren.

Syntax

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

standardmäßig,shape für elliptisch,size für den weitesten Winkel,position zentriert.

Radialer Verlauf - gleichmäßige Abstände zwischen den Farbmarken (Standard)

Der folgende Beispiel zeigt einen radialen Verlauf mit gleichmäßigem Abstand zwischen den Farbmarken:

Beispiel

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

Versuchen Sie es selbst

Radialer Verlauf - unterschiedliche Abstände zwischen den Farbmarken

Der folgende Beispiel zeigt einen radialen Verlauf mit unterschiedlichem Abstand zwischen den Farbmarken:

Beispiel

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

Versuchen Sie es selbst

Form festlegen

shape Die Parameter definieren die Form. Er akzeptiert die Werte circle oder ellipse. Der Standardwert ist ellipse (Ellipse).

Der folgende Beispiel zeigt einen radialen Verlauf in Form eines Kreises:

Beispiel

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

Versuchen Sie es selbst

Verwendung von Schlüsselwörtern mit verschiedenen Größen

size Die Parameter definieren die Größe des Verlaufs. Er akzeptiert vier Werte:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Beispiel

Definierte Radialverläufe mit verschiedenen size Schlüsselwörtern:

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

Versuchen Sie es selbst

Wiederholter radialer Verlauf

repeating-radial-gradient() Die Funktion wird für wiederholte radiale Verläufe verwendet:

Beispiel

Wiederholter radialer Verlauf:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Versuchen Sie es selbst

CSS-Verlaufsattribute

Nachstehend wird eine Liste der CSS-Verlaufsattribute aufgeführt:

Eigenschaft Beschreibung
background-image Eine oder mehrere Hintergrundbilder für ein Element festlegen.