CSS :: Функция radial-gradient()

Функция radial-gradient() (от англ. radial gradient – радиальный градиент) используется в качестве значения в свойствах background и background-image и добавляет радиальный градиент к фону изображения.

Синтаксис

radial-gradient(
[[circle || <радиус>] [at <позиция центра>]?, |
[ellipse || [<радиус> | <проценты>]{2}] [at <позиция центра>]?, |
[[circle | ellipse] || <ключевые слова>] [at <позиция центра>]?, |
at <позиция центра>,]?
<цвет> <стоп-позиция>?,
[<стоп-позиция>?, <цвет> <стоп-позиция>?]# )

Значения

circle – задает радиальный градиент круглой формы.
ellipse – задает радиальный градиент эллиптической формы. Значение используется по умолчанию.
<радиус> – радиус градиента в любых доступных в CSS единицах измерения (смотреть). Отрицательные значения не допускаются. Для эллипса также доступны проценты. При этом одно значение указывает радиус круга, два значения — радиус эллипса по оси X и его же радиус по оси Y. Если радиус не будет указан явно, градиент заполнит весь фон элемента.
<ключевые слова> – в случае использования ключевых слов circle и ellipse их размеры либо не указываются вообще, либо через пробел используются следующие ключевые слова:
- closest-side – для круга радиус будет равен расстоянию от центра круга до ближайшей стороны элемента. Для эллипса радиус a будет равен расстоянию от центра до ближайшей левой или правой стороны, а для радиуса b – до ближайшей верхней или нижней стороны элемента.
- farthest-side – для круга радиус будет равен расстоянию от центра круга до самой удаленной стороны элемента. Для эллипса радиус a будет равен расстоянию от центра до более удаленной левой или правой стороны, а для радиуса b – до более удаленной верхней или нижней стороны элемента.
- closest-corner – для круга радиус будет равен расстоянию от центра круга до вершины ближайшего угла элемента. Для эллипса радиусы вычисляются на основании расстояния от его центра до вершины ближайшего угла элемента.
- farthest-corner – данное значение используется по умолчанию в случае, когда ключевое слово не указано. Для круга радиус будет равен расстоянию от центра круга до вершины самого дальнего угла элемента; для эллипса радиусы вычисляются на основании расстояния от его центра до самого дальнего угла элемента.
<позиция центра> – координаты x и y центра градиента относительно вершины верхнего левого угла элемента. В качестве числовых аргументов могут использоваться любые доступные в CSS единицы измерения, а также проценты (смотреть). Вместо координат допустимо использование следующих ключевых слов:
- at left top || at top left – в левом верхнем углу (0% 0%);
- at center top || at top center || at top – по центру вверху (50% 0%);
- at right top || at top right – в правом верхнем углу (100% 0%);
- at right center || at center right || at right – справа по центру (100% 50%);
- at right bottom || at bottom right – в правом нижнем углу (100% 100%);
- at center bottom || at bottom center || at bottom – по центру внизу (50% 100%);
- at left bottom || at bottom left – в левом нижнем углу (0% 100%);
- at left center || at center left || at left – слева по центру (0% 50%);
- at center center || at center – в центре элемента (50% 50%).
<цвет> – цвет в любой доступной в CSS цветовой модели (смотреть).
<стоп-позиция> – координаты точки на градиентной прямой, по достижении которой браузер начнет создавать переход от текущего цвета к следующему в списке. При этом, если два соседних цвета в списке идентичны, то их стоп-позиции разрешается указывать через пробел после требуемого цвета. Например, вместо radial-gradient(15px 10px at 50% 50%, red 10%, red 35%, blue 100%) можно сокращенно записать radial-gradient(15px 10px at 50% 50%, red 10% 35%, blue 100%). Более того, можно вообще не указывать стоп-позиции или указывать только некоторые из них. В таких случаях браузер будет равномерно распределять позиции всех цветов, попадающих в соответствующие промежутки.

Таким образом, функция radial-gradient() в общем случае в качестве аргументов принимает радиусы a и b эллипса, координаты x и y центра эллипса относительно вершины верхнего левого угла элемента и значения цветов с указанием через пробел их горизонтальной позиции относительно центра эллипса.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-images-3/#radial-gradients

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/radial-gradient

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>

	<style>
	
		p{
		width: 500px;
		height: 300px;
		padding: 10px;
		margin: 4em;
		border: solid 3px black;
		}

		.background_1{
		background: radial-gradient(150px 100px at 50% 50%, 
		#ffffff 2px, #000000 30px, #dddddd 70px);
		}
		
		.background_2{
		background: radial-gradient(150px 100px at 50% 50%, 
		#ffffff, #000000 100px, #dddddd 200px);
		}
		
		.background_3{
		background: radial-gradient(550px 200px at 30% 50px, 
		#ffffff 20%, #000000 70%, #dddddd);
		}
		
		.background_4{
		background: radial-gradient(300px 250px at 40% 100px, 
		#ffffff, #000000, #dddddd);
		}
		
	</style>
	
</head>
<body>
	
	<p class="background_1">
		150px 100px at 50% 50%, #ffffff 2px, #000000 30px, #dddddd 70px
	</p>
	
	<p class="background_2">
		150px 100px at 50% 50%, #ffffff, #000000 100px, #dddddd 200px
	</p>
	
	<p class="background_3">
		550px 200px at 30% 50px, #ffffff 20%, #000000 70%, #dddddd
	</p>
	
	<p class="background_4">
		300px 250px at 40% 100px, #ffffff, #000000, #dddddd
	</p>
	
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>

	<style>
	
		p{
		width: 500px;
		height: 150px;
		padding: 10px;
		margin: 1.5em;
		border: solid 3px black;
		}

		.background_1{
		background: radial-gradient(circle closest-side at 
		30% 40%, #ffffff, #000000);
		}
		
		.background_2{
		background: radial-gradient(ellipse closest-side at 
		30% 40%, #ffffff, #000000);
		}
		
		.background_3{
		background: radial-gradient(circle closest-corner at 
		30% 40%, #ffffff, #000000);
		}
		
		.background_4{
		background: radial-gradient(ellipse closest-corner at 
		30% 40%, #ffffff, #000000);
		}
		
		.background_5{
		background: radial-gradient(circle farthest-corner at 
		30% 40%, #ffffff, #000000);
		}		
		
		.background_6{
		background: radial-gradient(ellipse farthest-corner at 
		30% 40%, #ffffff, #000000);
		}		
		
	</style>
	
</head>
<body>
	
	<p class="background_1"></p>
	<p class="background_2"></p>
	<p class="background_3"></p>
	<p class="background_4"></p>
	<p class="background_5"></p>
	<p class="background_6"></p>
	
</body>
</html>

Пример №2