repeating-radial-gradient()

Bei jeder Wiederholung werden die Positionen der Farbstopps um ein Vielfaches der Abmessungen des grundlegenden radialen Gradienten verschoben (der Abstand zwischen dem letzten Farbpunkt und dem ersten). Somit fällt die Position jedes Endfarbstopps mit einem Startfarbstopp zusammen; wenn die Farbwerte unterschiedlich sind, führt dies zu einem scharfen visuellen Übergang, der durch Wiederholung der ersten Farbe als letzte Farbe gemildert werden kann.

Wie bei jedem Verlauf hat ein sich wiederholender radialer Verlauf keine intrinsischen Abmessungen; d. h. er hat weder eine natürliche noch eine bevorzugte Größe oder ein bevorzugtes Verhältnis. Seine konkrete Größe wird der Größe des Elements entsprechen, auf das er angewendet wird.

Da <gradient>s dem <image> Datentyp angehören, können sie nur dort verwendet werden, wo <image>s verwendet werden können. Aus diesem Grund funktioniert repeating-radial-gradient() nicht mit background-color und anderen Eigenschaften, die den <color> Datentyp verwenden.

<position>

Die Position des Gradienten, interpretiert auf die gleiche Weise wie background-position oder transform-origin. Wenn nicht angegeben, ist der Standard center.

<shape>

Die Form des Gradienten. Der Wert kann circle (bedeutet, dass die Form des Gradienten ein Kreis mit konstantem Radius ist) oder ellipse (bedeutet, dass die Form eine achsenausgerichtete Ellipse ist) sein. Wenn nicht angegeben, ist der Standard ellipse.

<extent-keyword>

Ein Schlüsselwort, das beschreibt, wie groß die Endform sein muss. Die möglichen Werte sind:

Schlüsselwort	Beschreibung
closest-side	Die Endform des Gradienten trifft auf die Seite des Kastens, die dem Zentrum am nächsten ist (bei Kreisen) oder trifft auf beide vertikalen und horizontalen Seiten, die dem Zentrum am nächsten sind (bei Ellipsen).
closest-corner	Die Endform des Gradienten ist so dimensioniert, dass sie genau die nächste Ecke des Kastens vom Zentrum aus erreicht.
farthest-side	Ähnlich wie closest-side, außer dass die Endform so dimensioniert ist, dass sie die Seite des Kastens trifft, die am weitesten vom Zentrum entfernt ist (oder vertikale und horizontale Seiten).
farthest-corner	Die Endform des Gradienten ist so dimensioniert, dass sie genau die am weitesten entfernte Ecke des Kastens vom Zentrum aus erreicht.

Hinweis: Frühe Implementierungen dieser Funktion enthielten andere Schlüsselwörter (cover und contain) als Synonyme für die Standardwerte farthest-corner und closest-side. Verwenden Sie ausschließlich die Standard-Schlüsselwörter, da einige Implementierungen diese älteren Varianten bereits entfernt haben.

<color-stop>

Ein <color> Wert des Farbstopps, gefolgt von einer optionalen Stopp-Position (entweder ein <percentage> oder eine <length> entlang der Achse des Gradienten). Ein Prozentsatz von 0% oder eine Länge von 0 steht für das Zentrum des Gradienten; der Wert 100% repräsentiert den Schnittpunkt der Endform mit dem virtuellen Gradientenstrahl. Prozentwerte dazwischen sind linear auf dem virtuellen Gradientenstrahl positioniert.

<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>  

<div class="radial-gradient"></div>

.radial-gradient {
  width: 240px;
  height: 120px;
}

.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 Verlauf wird 20% vom oberen linken Rand zentriert und wiederholt sich 10-mal zwischen dem Zentrum und der am weitesten entfernten Ecke (der unteren rechten Ecke). Browser, die mehrfache Positionsfarbstopps unterstützen, zeigen eine rot-grün gestreifte Ellipse. Browser, die die Syntax noch nicht unterstützen, sehen einen Verlauf, der von Rot nach Schwarz und dann von Blau nach Grün geht.

<div class="shorter"></div>
<div class="longer"></div>

div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}

In diesem Beispiel zur Interpolation wird das hsl Farbsystem 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 vom Rot zum Blau über den kürzeren Bogen auf dem Farbkreis verläuft. Das rechte Kästchen verwendet die längere Interpolation, was bedeutet, dass die Farbe vom Rot zum Blau über den längeren Bogen verläuft, durch Grüntöne, Gelb- und Orangetöne.

• Using CSS gradients
• Andere Gradient-Funktionen: radial-gradient(), linear-gradient(), repeating-linear-gradient(), conic-gradient(), repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• image()
• element()
• image-set()
• cross-fade()