Свойство -webkit-radial-gradient

Справочник:

Вендорное свойство

Характеристики свойства

В каких браузерах работает?


-	3.0+	-	5.1+	-	-	-

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	-	-	-

Для чего используется?

Свойство отвечает за установку градиентной расцветки фона. Специально создано для работы в браузерах Chrome и Safari. Создает градиент радиальной или эллиптической формы. Также стоит отметить, что свойство может создать не только двухцветный градиенты, но и более. Минимально допустимое значение, которое следует указать в значении - 2. Это значение является обязательным параметром, без которого свойство не отработает.

Как правильно задавать?

background-image: -webkit-radial-gradient(значение);

Какие могут быть значения?

bg-position - устанавливает центр градиента относительно периметра блока. Изначально системой выбирается положение center center.
angle - определяет угол распространения градиента. Если значение этого параметра не выставлено, то угол составляет 0deg.
shape - определяет форму распространения градиента. Доступны два возможных варианта - круглая (по умолчанию) и эллиптическая.
size - определяет местоположение начала градиента. не считая пиксельных значений, допускается использовать такие команды: closest-side (contain) - ближайшая граница контейнера, closest-corner - ближайший угол контейнера, farthest-side - дальнейшая граница контейнера, farthest-corner(cover) - дальнейший угол.
color-stop - устанавливает цвет основных точек, между которыми производится цветовой переход. Обязательный параметр для указания. Допускается применить 2 значения и более.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство -webkit-linear-gradient</title>
  <style>
   body {
    background: #feffff;
    background: -webkit-radial-gradient
(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <p>Содержимое страницы</p>
 </body>
</html>

Тип CSS свойства:

Градиент