repeating-radial-gradient()

При каждом повторении положения цветовых остановок смещаются на кратное размерам основного радиального градиента (расстоянию между последней и первой цветовыми остановками). Таким образом, положение каждой конечной цветовой остановки совпадает с начальной; если цветовые значения отличаются, это приведёт к резкому визуальному переходу, который можно смягчить, повторив первое значение цвета как последнее.

Как и любой градиент, повторяющийся радиальный градиент имеет нет внутренних размеров; то есть, у него нет естественного или предпочтительного размера, ни пропорции. Его конкретный размер будет соответствовать размеру элемента, к которому он применяется.

Поскольку <gradient> относятся к типу данных <image>, они могут использоваться только там, где могут использоваться <image>. По этой причине repeating-radial-gradient() не будет работать с background-color и другими свойствами, использующими тип данных <color>.

<position>

Положение градиента, интерпретируемое так же, как background-position или transform-origin. Если не указано, по умолчанию center.

<shape>

Форма градиента. Значение может быть circle (что означает, что форма градиента — круг с постоянным радиусом) или ellipse (что означает, что форма — эллипс, выровненный по осям). Если не указано, по умолчанию ellipse.

<extent-keyword>

Ключевое слово, описывающее, насколько большой должна быть конечная форма. Возможные значения:

Ключевое слово	Описание
closest-side	Конечная форма градиента встречается с стороной ячейки, ближайшей к центру (для кругов) или встречается с обеими ближайшими к центру вертикальной и горизонтальной сторонами (для эллипсов).
closest-corner	Конечная форма градиента имеет размер, достаточный для того, чтобы она точно встретила ближайший угол ячейки от центра.
farthest-side	Аналогично closest-side, за исключением того, что конечная форма имеет размер, достаточный для встречи с наиболее удалённой от центра стороной ячейки (или вертикальной и горизонтальной сторонами).
farthest-corner	Конечная форма градиента имеет размер, достаточный для того, чтобы она точно встретила наиболее удалённый угол ячейки от центра.

Примечание: Ранние реализации этой функции включали другие ключевые слова (cover и contain) как синонимы стандартных farthest-corner и closest-side, соответственно. Используйте только стандартные ключевые слова, так как некоторые реализации уже отказались от этих устаревших вариантов.

<color-stop>

Значение <color> цветовой остановки, за которым следует необязательное положение остановки (либо <percentage>, либо <length> вдоль оси градиента). Процент от 0%, или длина 0, представляет центр градиента; значение 100% представляет пересечение конечной формы с виртуальным лучом градиента. Процентные значения между ними линейно расположены на виртуальном луче градиента.

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

.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%
  );
}

Эллиптический градиент будет расположен в 20% от левого верхнего угла и будет повторяться 10 раз между центром и самым удалённым углом (правым нижним углом). Браузеры, поддерживающие многопозиционные цветовые остановки, отобразят красную и зеленую полосатую эллипс. Браузеры, не поддерживающие синтаксис, увидят градиент, который переходит от красного к чёрному, а затем от синего к зелёному.

В этом примере для интерполяции используется цветовая система hsl, и интерполируется цветовой тон.

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

Левая область использует кратчайшую интерполяцию, что означает, что цвет переходит от красного к синему, используя меньшую дугу на цветовом круге. Правая область использует длинную интерполяцию, что означает, что цвет переходит от красного к синему, проходя через зелёный, жёлтый и оранжевый цвета.

• Использование CSS градиентов
• Другие функции градиентов: 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()