Функция CSS repeating-radial-gradient()

Определение и использование

CSS repeating-radial-gradient() Функция предназначена для повторяющейся радиальной градиентной заливки.

Пример:

Радиальная градиентная заливка Повторяющаяся радиальная градиентная заливка
radial-gradient(red, yellow, green); repeating-radial-gradient(red, yellow 10%, green 15%);

Пример

Пример 1

Однотипная радиальная градиентная заливка:

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

Попробуйте сами

Пример 2

Другой повторяющийся радиальный градиент с определением формы, размера и положения:

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

Попробуйте сами

Пример 3

Другой повторяющийся радиальный градиент с двумя точками остановки цвета:

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

Попробуйте сами

Синтаксис CSS

repeating-radial-gradient(shape size at position, start-color, ... , last-color);
Значение Описание
shape

Определяет форму градиента. Возможные значения:

  • ellipse (по умолчанию)
  • circle
size

Определяет размер градиента. Возможные значения:

  • farthest-corner (по умолчанию)
  • closest-side
  • closest-corner
  • farthest-side
at position Определяет положение градиента. Значением по умолчанию является "center".
start-color, ... , last-color

Точка цвета в конце - это цвет, между которым вы хотите отображать плавный переход.

Эта величина состоит из значения цвета и одного или двух опциональных точек остановки (процент между 0% и 100% или длина по направлению градиента)

Технические детали

Версия: CSS Images Module Level 3

Поддержка браузерами

Числа в таблице показывают первую версию браузера, которая полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
repeating-radial-gradient()
26 10 16 6.1 12.1
Два цвета в конце на двух положениях
71 79 64 12.1 58

Соответствующие страницы

Урок:CSS градиент

Ссылка:Свойство background-image CSS

Ссылка:Функция CSS conic-gradient()

Ссылка:Функция CSS linear-gradient()

Ссылка:Функция CSS radial-gradient()

Ссылка:Функция CSS repeating-conic-gradient()

Ссылка:Функция repeating-linear-gradient() в CSS