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

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

CSS repeating-conic-gradient() Функция используется для повторения конусообразного градиента.

Пример:

конусообразный градиент повторяющийся конусообразный градиент
conic-gradient(red, yellow); repeating-conic-gradient(red 10%, yellow 20%);

Пример

Пример 1

Повторяющаяся коническая градиентная линия:

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

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

Пример 2

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

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

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

Пример 3

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

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

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

Синтаксис CSS

repeating-conic-gradient([from angle] position,] Угол цвета, Угол цвета, ... );
Значение Описание
from angle

Опционально. Полный поворот конической градиентной линии по этому углу.

по умолчанию 0deg.
at position

Опционально. Указание центра конической градиентной линии.

по умолчанию center.
Угол цвета, ... , Угол цвета

Конечные точки цвета — это цвета, между которыми вы хотите отображать平滑ный переход.

Эта величина состоит из цветовых значений и одного или двух дополнительных положений остановки (угол от 0 до 360 градусов или百分比 от 0% до 100%)

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

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

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

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

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

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

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

См. также:Свойство background-image CSS

См. также:Функция CSS conic-gradient()

См. также:Функция CSS linear-gradient()

См. также:Функция CSS radial-gradient()

См. также:Функция CSS repeating-linear-gradient()

См. также:Функция CSS repeating-radial-gradient()