Радиальный градиент: radial-gradient()

radial-gradient

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 10.0 3.6 10.0 11.60 5.1
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 4.1.1 1.0 10 12.10 7.1.2
Радиальный градиент
radial-gradient() — этот градиент позволяет переходить от одного цвета к другому по окружности или эллипсу
Описание
Градиент работает следующим образом: Сначала выбирается геометрическая фигура по которой будет распространяться градиент, это может быть круг — circle или эллипс — ellipse. Если фигура не выбирается, то по умолчанию градиент будет распространяться по фигуре circle. Затем указывается ключевое слово и позиция центра круга или эллипса, позиция указывается двумя значениями, эти значения могут быть абсолютными или относительными единицами. Далее указывается цвет и длина радиуса.
Применяется к свойствам
background | background-image
Ключевые слова
closest-side | farthest-side | closest-corner | farthest-corner | cover | contain
Правила записи
свойство: radial-gradient( геометрическая фигура, ключевое слово и позиция центра фигуры, значение цвета1 (длина радиуса), значение цвета2 (длина радиуса), …, значение цветаn (длина радиуса) );
Примеры

<p>

Это правило применит к абзацу радиальный градиент который состоит из трех цветов: purple, orange и green

</p>

Поделиться