Справочник по CSS : Тематический указатель : Расширения CSS для Firefox (Gecko) : Значения : -moz-radial-gradient

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

Значение -moz-radial-gradient

Обозначает радиальный (круговой) градиент. Применяется к background-image, background.

Синтаксис

-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Используемые значения

<position>
Это позиция или точка отсчета для градиента, обозначающая тоже самое, что и в свойствах background-position или -moz-transform-origin. Если пропущено, то автоматически присваивается значение center.
<angle>
Задает угол, под которым распространяется градиент. По умолчанию принимает значение 0deg.
<shape>
Задает форму градиента. Она может быть в форме круга (circle) или эллипса (ellipse). По умолчанию принимает значение ellipse.
<size>
Задает размер градиента:
  • closest-side - Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
  • closest-corner - Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
  • farthest-side - Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоии, горизонтальной и вертикальной, сторонам (для ellipse).
  • farthest-corner - Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
  • contain - Аналогично closest-side.
  • cover - Аналогично farthest-corner.
<stop>
Отвечает за отображение color-stops (мест смены цветов) в CSS градиентах по таким же правилам, как и в SVG градиентах. Может задаваться в процентах или мерах длины, например, пикселях.

Замечания

Градиент - это комбинация двух и более заданных цветов, плавно переходящих друг в друга. В CSS градиенты используют вместо каких-либо изображений, как индикатор загрузки, для улучшения восприятия web-страницы при масштабировании и т.д. Mozilla Firefox поддерживает два вида градиентов: линейный и радиальный.

Mozilla Firefox корректно поддерживает градиенты только как значения для свойства background-image, а заодно и background. Вы можете задать значение для градиента вместо URL изображения.

Радиальный или круговой градиент, задаваемый с помощью -moz-radial-gradient, также распространяется вдоль оси. Его можно представить как последовательность кругов, расположенных вдоль оси, для каждого из которых задана точка отсчета (центр) и длина радиуса. Радиальный градиент выглядит следующим образом:

background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
Радиальный круговой градиент в Mozilla Firefox

-moz-radial-gradient не поддерживает повторяющиеся градиенты. По умолчанию градиент растягивается, чтобы заполнить весь элемент, для которого он применяется. Посмотрите статью -moz-repeating-radial-gradient, чтобы узнать как сделать повторяющийся круговой градиент.

Примеры

В примерах показано как описываются радиальные градиенты с помощью -moz-radial-gradient

background: -moz-radial-gradient(45px 45px 45deg, circle cover,
				 aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);

Результат выполнения примера:

Радиальный круговой градиент в Mozilla Firefox











background: -moz-radial-gradient(45px 45px, ellipse farthest-corner,
				 aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
            no-repeat;

Результат выполнения примера:

Радиальный круговой градиент в Mozilla Firefox











background: -moz-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);

Результат выполнения примера:

Круговой градиент в Mozilla Firefox

Стандарты

W3C Proposal for Radial Gradients, WebKit's original proposal

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

Firefox (Gecko) начиная с версии 3.6 (1.9.2) - для -moz-radial-gradient().

Safari (WebKit) начиная с версии 4.0 (528) - для -webkit-gradient(radial,…).

В Safari (WebKit) значения задаются таким образом, что нужен главный (radial или linear) параметр, чтобы идентифицировать вид градиента.

Смотрите также

-moz-repeating-radial-gradient, -moz-linear-gradient, background-image, background.

Ссылки на источники

https://developer.mozilla.org/en/CSS/-moz-radial-gradient

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования