Функция radial-gradient() | Справочник CSS
http://belarusweb.net
Основы создания сайтов

Функция 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 центра эллипса относительно вершины верхнего левого угла элемента и значения цветов с указанием через пробел их горизонтальной позиции относительно центра эллипса.

Ссылки

Примеры

HTML Результат BwCodes
<!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 Результат BwCodes
<!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