Характеристики свойства
В каких браузерах работает?
| - | - | - | - | 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>
Тип CSS свойства:
Градиент