repeating-radial-gradient()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die repeating-radial-gradient()
CSS Funktion erstellt ein Bild, das aus sich wiederholenden Gradienten besteht, die von einem Ursprung ausstrahlen. Sie ist ähnlich wie radial-gradient()
und nimmt die gleichen Argumente, jedoch wiederholt sie die Farbstopps unendlich in alle Richtungen, um ihren gesamten Container abzudecken, ähnlich wie repeating-linear-gradient()
. Das Ergebnis der Funktion ist ein Objekt des Datentyps <gradient>
, einer speziellen Art von <image>
.
Probieren Sie es aus
Bei jeder Wiederholung werden die Positionen der Farbstopps um ein Vielfaches der Dimensionen des grundlegenden radialen Gradienten (die Entfernung zwischen dem letzten und dem ersten Farbstopp) verschoben. Dadurch fällt die Position jedes endenden Farbstopps mit einem startenden Farbstopp zusammen; wenn die Farbwerte unterschiedlich sind, resultiert dies in einem scharfen visuellen Übergang, der gemildert werden kann, indem die erste Farbe als letzte Farbe wiederholt wird.
Wie bei jedem Gradienten hat ein sich wiederholender radialer Gradient keine intrinsischen Dimensionen; d.h., er hat keine natürliche oder bevorzugte Größe und kein bevorzugtes Verhältnis. Seine konkrete Größe wird der Größe des Elements entsprechen, auf das er angewendet wird.
Da <gradient>
s zum Datentyp <image>
gehören, können sie nur dort verwendet werden, wo <image>
s eingesetzt werden können. Aus diesem Grund funktioniert repeating-radial-gradient()
nicht mit background-color
und anderen Eigenschaften, die den Datentyp <color>
verwenden.
Syntax
/* A gradient at the center of its container,
starting red, changing to blue, and finishing green,
with the colors repeating every 30px */
repeating-radial-gradient(circle at center, red 0, blue, green 30px)
/* An elliptical gradient near the top left of its container,
starting red, changing to green and back again,
repeating five times between the center and the bottom right corner,
and only once between the center and the top left corner */
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%)
Werte
<position>
-
Die Position des Gradienten, interpretiert auf die gleiche Weise wie
background-position
odertransform-origin
. Wenn nichts angegeben ist, ist der Standardwertcenter
. <shape>
-
Die Form des Gradienten. Der Wert kann
circle
sein (was bedeutet, dass die Form des Gradienten ein Kreis mit konstantem Radius ist) oderellipse
(was bedeutet, dass die Form eine achsenparallele Ellipse ist). Wenn nichts angegeben ist, ist der Standardwertellipse
. <extent-keyword>
-
Ein Schlüsselwort, das beschreibt, wie groß die endende Form sein muss. Die möglichen Werte sind:
Schlüsselwort Beschreibung closest-side
Die endende Form des Gradienten trifft auf die Seite des Kastens, die dem Zentrum am nächsten ist (für Kreise) oder trifft auf die vertikalen und horizontalen Seiten (für Ellipsen). closest-corner
Die endende Form des Gradienten wird so dimensioniert, dass sie genau auf die dem Zentrum nächstgelegene Ecke des Kastens trifft. farthest-side
Ähnlich wie closest-side
, nur dass die endende Form so dimensioniert ist, dass sie die weiteste Seite des Kastens vom Zentrum aus trifft (oder die vertikalen und horizontalen Seiten).farthest-corner
Die endende Form des Gradienten wird so dimensioniert, dass sie genau auf die am weitesten entfernte Ecke des Kastens vom Zentrum trifft. Hinweis: Frühere Implementierungen dieser Funktion beinhalteten andere Schlüsselwörter (
cover
undcontain
) als Synonyme für die Standardbegriffefarthest-corner
undclosest-side
. Verwenden Sie nur die Standardbegriffe, da einige Implementierungen diese älteren Varianten bereits entfernt haben. <color-stop>
-
Ein Wert des
<color>
eines Farbstopps, gefolgt von einer optionalen Stopp-Position (entweder ein<percentage>
oder ein<length>
entlang der Achse des Gradienten). Ein Prozentsatz von0%
oder eine Länge von0
repräsentiert das Zentrum des Gradienten; der Wert100%
repräsentiert das Zusammentreffen der endenden Form mit dem virtuellen Gradientenstrahl. Prozentuale Werte dazwischen sind linear auf dem virtuellen Gradientenstrahl positioniert.
Formale Syntax
<repeating-radial-gradient()> =
repeating-radial-gradient( [ <radial-gradient-syntax> ] )
<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>
<radial-shape> =
circle |
ellipse
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
<linear-color-stop> =
<color> <length-percentage>?
<linear-color-hint> =
<length-percentage>
Beispiele
Schwarz-Weiß-Gradient
.radial-gradient {
background: repeating-radial-gradient(
black,
black 5px,
white 5px,
white 10px
);
}
Farthest-corner
.radial-gradient {
background: repeating-radial-gradient(
ellipse farthest-corner at 20% 20%,
red,
black 5%,
blue 5%,
green 10%
);
background: repeating-radial-gradient(
ellipse farthest-corner at 20% 20%,
red 0 5%,
green 5% 10%
);
}
Der elliptische Gradient wird 20% von oben links zentriert und wiederholt sich 10 Mal zwischen Zentrum und der am weitesten entfernten Ecke (der unteren rechten Ecke). Browser, die mehrere Positionen von Farbstopps unterstützen, zeigen eine rot-grüne gestreifte Ellipse an. Browser, die die Syntax noch nicht unterstützen, sehen einen Verlauf, der von Rot zu Schwarz und dann von Blau zu Grün geht.
Interpolation mit Farbton
In diesem Beispiel zur Interpolation wird das HSL Farbensystem verwendet und der Farbton wird interpoliert.
.shorter {
background-image: repeating-radial-gradient(
circle at center in hsl shorter hue,
red 30px,
blue 60px
);
}
.longer {
background-image: repeating-radial-gradient(
circle at center in hsl longer hue,
red 30px,
blue 60px
);
}
Das linke Kästchen verwendet die kürzere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den kürzeren Bogen des Farbkreises geht. Das rechte Kästchen verwendet die längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen geht und Grün, Gelb und Orange durchläuft.
Hinweis: Bitte sehen Sie unter Verwendung von CSS-Verläufen für weitere Beispiele nach.
Spezifikationen
Specification |
---|
CSS Images Module Level 3 # repeating-gradients |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
repeating-radial-gradient() | ||||||||||||
at syntax | ||||||||||||
Double-position color stops | ||||||||||||
Hue interpolation method | ||||||||||||
Interpolation color space | ||||||||||||
Interpolation Hints / Gradient Midpoints |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.