Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

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

Дата:31.10.15 в 10:49

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

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

- - - - 3.6+ - -

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

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

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

Отвечает за создание градиентных фоновых изображений в форме эллипса или окружности. Свойство было создано для оптимизации работы браузера Firefox. При использовании данного свойства необходимо помнить, что вендорные свойства семейства -moz не отвечают общепринятым стандартам, другими словами такой код не пройдет проверку на валидацию.

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

background-image: -moz-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>Свойство -moz-radial-gradient</title>
  <style>
   body {
    background: #feffff;
    background: -moz-radial-gradient
(center, ellipse cover, #feffff 0%, #d2ebf9 100%);
    
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <p>Очень парадоксален тот факт, что каждый браузер
 некоторые элементы выводит по своему! Неужели нельзя
 было договориться? Ради  верстальщиков всех времен и народов?</p>
 </body>
</html>

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: