Радиальный градиент

Радиальный градиент задается путем указания центра градиента (где будет находиться эллипс 0%), а также размера и формы конечной фигуры (эллипс 100%).

Положение градиента, интерпретируемое так же, как background-positionили transform-origin. Если не указано, по умолчанию используется center.

Конечная форма градиента. Значение может быть circle(что означает, что форма градиента представляет собой круг с постоянным радиусом) или ellipse(что означает, что форма представляет собой выровненный по оси эллипс). Если не указано, по умолчанию используется ellipse.

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

Градиенты круга и эллипса принимают следующие ключевые слова для своего :

Ключевое слово	Описание
closest-side	Конечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для кругов), или соответствует как вертикальной, так и горизонтальной сторонам, ближайшим к центру (для эллипсов).
closest-corner	Конечная форма градиента имеет такой размер, чтобы она точно соответствовала ближайшему углу прямоугольника от его центра.
farthest-side	Аналогично ближайшей стороне, за исключением того, что конечная форма имеет размер, соответствующий стороне коробки, наиболее удаленной от ее центра (или вертикальной и горизонтальной сторонам).
farthest-corner	Значение по умолчанию, конечная форма градиента имеет такой размер, чтобы она точно соответствовала самому дальнему углу прямоугольника от его центра.

Если указано как circle, размер может быть указан явно как , что обеспечивает явный радиус круга. Отрицательные значения недействительны.

Если указано как ellipse или опущено, размер может быть задан как с двумя значениями, чтобы обеспечить явный размер эллипса. Первое значение представляет собой горизонтальный радиус, второе — вертикальный радиус. Процентные значения относятся к соответствующему размеру поля градиента. Отрицательные значения недействительны.

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

Подсказка по цвету — это подсказка по интерполяции, определяющая, как градиент прогрессирует между соседними цветовыми остановками. Длина определяет, в какой точке между двумя цветовыми остановками градиентный цвет должен достигать середины цветового перехода. Если опущено, то средняя точка цветового перехода — это средняя точка между двумя цветовыми остановками.

Как и в случае с любым градиентом, радиальный градиент не имеет внутренних размеров; т.е. у него нет естественного или предпочтительного размера, а также предпочтительного соотношения. Его конкретный размер будет соответствовать размеру элемента, к которому он применяется.

Чтобы создать радиальный градиент, который повторяется, чтобы заполнить его контейнер, вместо этого используйте функцию repeating-radial-gradient().

Поскольку s принадлежат типу данных, их можно использовать только там, где можно использовать s. По этой причине radial-gradient()не будут работать background-colorи другие свойства, использующие этот тип данных.