Свойство CSS -o-linear-gradient

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

Браузеры для ПК
Internet Explorer Chrome Opera Safari Firefox Edge
    12+      
Браузеры для планшетов и мобильных устройств
Android webview Chrome для Android Edge Mobile Firefox для Android Opera для Android iOS Safari Samsung Internet
        Да    

Краткая информация

Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Реализация в javascript Добавление стиля непосредственно самому элементу
document.getElementById('idElement').setAttribute('style','background: -o-linear-gradient (0deg, #1e5799 0%, #2e9de8 100%);');
в данном случае элементу с id='idElement' будет добавлен стиль
background: -o-linear-gradient (0deg, #1e5799 0%, #2e9de8 100%);
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="background: -o-linear-gradient (0deg, #1e5799 0%, #2e9de8 100%);">...</div>
Реализация в jQuery Добавление стиля непосредственно самому элементу
$('#idElement').css('background','-o-linear-gradient (0deg, #1e5799 0%, #2e9de8 100%)');
в данном случае элементу с id='idElement' будет добавлен стиль
background: -o-linear-gradient (0deg, #1e5799 0%, #2e9de8 100%);
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="background: -o-linear-gradient (0deg, #1e5799 0%, #2e9de8 100%);">...</div>

Поддерживающие версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Создает линейный градиент, т.е. плавный переход от одного цвета к другому, у свойства background или background-image в браузерах Opera. Можно задать несколько точек начала градиента с индивидуальным цветом, при этом указать на каком расстоянии будут находится точки градиента. Цвет и расстояния можно задавать в любых допустимых в CSS единицах.

-o-linear-gradient должно содержать минимум два цвета, так-же после цвета можно задать расстояние где будет располагаться точка начала или конца градиента. В случае если отсутствуют указанные сведения расстояний на которых будет расположены точки градиента, тогда первый и последний цвета располагаются вначале (0%) и в конце (100%) элемента, остальные равномерно растягиваются по всей длине элемента.

Поэкспериментировать и попробовать создать свой градиент можно при помощи CSS генератора градиента по данной ссылке.

Синтаксис

background-image: -o-linear-gradient ([<угол> | <позиция>], первый <цвет>, второй <цвет> [,<цвет>]*);

Например:

... background: -o-linear-gradient (0deg, rgba(30, 87, 153, 1) 0%, rgba(46, 157, 232, 1) 100%); или background-image: -o-linear-gradient (0deg, #1e5799 0%, #2e9de8 100%); ...

Значения

угол

Угол начала градиента, т.е из какой точки и в каком направлении будет расположен градиент, точка окончания градиента будет расположена по прямой линии которая будет оканчиваться под углом 180 градусов относительно заданной точки.

К примеру если мы укажем  начало градиента 45 градусов, то его окончание будет на 225 градусов.

Нулевая точка или 0 градусов расположено в левой части, направление роста координат против часовой стрелки (см. рис. 1 ниже). Так же допустимо указывать отрицательные углы, поставив минус перед значением, тогда отчет будет вестись по часовой стрелки и значение -90 градусов будет расположено в верхней части.

рис. 1

позиция

Альтернатива углу за исключением того, что вместо градусов применяются значения left, right, top и bottom, которые указывают с какой стороны будет начинаться градиент. Так же допустимо указывать значения сочетания граничащих сторон: left top, top right, right bottom, bottom left. При этом порядок первого и второго значения не важен, таким образом значение top right будет равно right top.

Ниже представлена таблица соответствия позиции и угла

цвет

Цвета градиента в любых допустимых CSS значениях цвета

Табл. 1. Типы градиента
Позиция Угол Направление градиента Вид
top 270deg
или
-90deg
Сверху вниз. Сверху вниз.
left 0deg
или
360deg
Слева направо. Слева направо.
bottom 90deg
или
-270deg
Снизу вверх. Снизу вверх
right 180deg
или
-180deg
Справа налево. Справа налево.
left top
или
top left
315deg
или
-45deg
От левого верхнего угла к правому нижнему. От левого верхнего угла к правому нижнему.
left bottom
или
bottom left
45deg
или
-315deg
От левого нижнего угла к правому верхнему. От левого нижнего угла к правому верхнему.
right top
или
top right
225deg
или
-135deg
От правого верхнего угла к левому нижнему. От правого верхнего угла к левому нижнему.
right bottom
или
bottom right
135deg
или
-225deg
От правого нижнего угла к левому верхнему. От правого нижнего угла к левому верхнему.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример использования свойства -o-linear-gradient</title> <style> div { padding: 10px; border: 1px solid #666; background: -moz-linear-gradient(0deg,rgba(0, 165, 223, 1) 0%,rgba(62, 20, 123, 1) 20%,rgba(226, 0, 121, 1) 40%,rgba(223, 19, 44, 1) 60%,rgba(243, 239, 21, 1) 80%,rgba(0, 152, 71, 1) 100%); background: -o-linear-gradient(0deg,rgba(0, 165, 223, 1) 0%,rgba(62, 20, 123, 1) 20%,rgba(226, 0, 121, 1) 40%,rgba(223, 19, 44, 1) 60%,rgba(243, 239, 21, 1) 80%,rgba(0, 152, 71, 1) 100%); background: -webkit-linear-gradient(0deg,rgba(0, 165, 223, 1) 0%,rgba(62, 20, 123, 1) 20%,rgba(226, 0, 121, 1) 40%,rgba(223, 19, 44, 1) 60%,rgba(243, 239, 21, 1) 80%,rgba(0, 152, 71, 1) 100%); background: linear-gradient(90deg,rgba(0, 165, 223, 1) 0%,rgba(62, 20, 123, 1) 20%,rgba(226, 0, 121, 1) 40%,rgba(223, 19, 44, 1) 60%,rgba(243, 239, 21, 1) 80%,rgba(0, 152, 71, 1) 100%); } </style> </head> <body> <div> В этом блоке показан пример использования градиента CSS. </div> </body> </html>

Результат

В этом блоке показан пример использования градиента CSS.