Radiale CSS -Verläufe
Radiale CSS-Verläufe
Ein radialer Farbverlauf wird durch seinen Mittelpunkt definiert.
Um einen radialen Farbverlauf zu erstellen, müssen Sie außerdem mindestens zwei Farbstopps definieren.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Standardmäßig ist die Form Ellipse, die Größe ist die entfernteste Ecke und die Position ist Mitte.
Radialer Farbverlauf - Farbstopps in gleichmäßigen Abständen (dies ist die Standardeinstellung)
Das folgende Beispiel zeigt einen radialen Verlauf mit gleichmäßig verteilten Farbstopps:
Beispiel
#grad {
background-image: radial-gradient(red, yellow, green);
}
Radialer Farbverlauf - Farbstopps mit unterschiedlichen Abständen
Das folgende Beispiel zeigt einen radialen Farbverlauf mit unterschiedlich beabstandeten Farbstopps:
Beispiel
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Form festlegen
Der Formparameter definiert die Form. Es kann den Wert Kreis oder Ellipse annehmen. Der Standardwert ist Ellipse.
Das folgende Beispiel zeigt einen radialen Verlauf mit der Form eines Kreises:
Beispiel
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Verwendung von Schlüsselwörtern unterschiedlicher Größe
Der Größenparameter definiert die Größe des Farbverlaufs. Es kann vier Werte annehmen:
- nächste Seite
- entfernteste Seite
- nächste Ecke
- hinterste Ecke
Beispiel
Ein radialer Farbverlauf mit Schlüsselwörtern unterschiedlicher Größe:
#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);
}
Wiederholen eines radialen Gradienten
Die Funktion repeating-radial-gradient() wird verwendet, um radiale Farbverläufe zu wiederholen:
Beispiel
Ein sich wiederholender radialer Farbverlauf:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}