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

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

CSS radial-gradient() Функція встановлює радіальний градієнт як зображення фону.

Радіальний градієнт визначається його центром.

Для створення радіального градієнта потрібно визначити принаймні два кольорових маркера.

Пример радіального градієнта:

Пример

Пример 1

Радіальні градієнти з рівномірним розподілом кольорових маркерів:

#grad {
  background-image: radial-gradient(red, green, blue);
}

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

Пример 2

Разнообразие радиальных градиентов по цвету:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

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

Пример 3

Радиальный градиент с круглой формой:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

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

Пример 4

Использование различных ключевых слов для大小的 радиального градиента:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

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

Синтаксис CSS

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

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

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

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

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

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

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

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

Версия: CSS3

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

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

Chrome Edge Firefox Safari Opera
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 repeating-conic-gradient()

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

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