1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
---
title: radial-gradient()
slug: Web/CSS/radial-gradient()
translation_of: Web/CSS/radial-gradient()
---
<div>{{CSSRef}}</div>
<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>radial-gradient()</code></strong> создаёт картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.</p>
<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div>
<p>Как и любой градиент, радиальный градиент не имеет <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">внутренних размеров</a>, то есть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применён.</p>
<p>Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию {{cssxref("repeating-radial-gradient")}}.</p>
<p>Поскольку <code><gradient>ы</code> относятся к типу <code><image></code>, они могут быть использованы только там где используется тип <code><image></code>. По этой причине <code>radial-gradient()</code> не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("<color>")}}.</p>
<h2 id="Композиция_свойства">Композиция свойства</h2>
<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Радиальный градиент задаётся <em>позицией центра</em>, <em>конечной формой</em>, и двумя или более <em>точками изменения цвета</em>.</p>
<p>Чтобы создать плавный градиент, функция <code>radial-gradient()</code> рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.</p>
<p>Точки изменения цвета расположены на <em>виртуальном луче градиента</em>, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является <code>100%</code>. Цвет каждой такой формы задаётся цветом на пересечении луча градиента и этой формы.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: css no-line-numbers notranslate">/* Градиент в центре контейнера,
переход от красного к синему и после к зелёному */
radial-gradient(circle at center, red 0, blue, green 100%)</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt>{{cssxref("<position>")}}</dt>
<dd>Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна <code>center</code>.</dd>
<dt><code><shape></code></dt>
<dd>Форма градиента. Может принимать значение <code>circle</code> (подразумевается что формой является круг с постоянным радиусом) или <code>ellipse</code> (форма является эллипсом, выровненным по оси). По умолчанию имеет значение <code>ellipse</code>.</dd>
<dt><code><extent-keyword></code></dt>
<dd>Параметр определяющий размер конечной формы. Возможные значения:</dd>
<dd>
<table class="standard-table">
<tbody>
<tr>
<th>Значение</th>
<th>Описание</th>
</tr>
<tr>
<td><code>closest-side</code></td>
<td>Конечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).</td>
</tr>
<tr>
<td><code>closest-corner</code></td>
<td>Конечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.</td>
</tr>
<tr>
<td><code>farthest-side</code></td>
<td>Схоже с <code>closest-side</code>, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)</td>
</tr>
<tr>
<td><code>farthest-corner</code></td>
<td>Конечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.</td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>Примечание:</strong> Ранние реализации этой функции включают в себя другие значения свойства (<code>cover</code> and <code>contain</code>) которые являются синонимами <span class="st"><code>farthest-corner</code></span> и <code>closest-side</code>, соответственно. Рекомендуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.</p>
</div>
</dd>
<dt><code><color-stop></code></dt>
<dd>{{cssxref("<color>")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("<percentage>")}} или {{cssxref("<length>")}} вдоль оси градиента). Значения <code>0%</code>, или <code>0</code> представляют центр градиента; значение <code>100%</code> представляет собой виртуальное пересечение конечной формы с виртуальным лучом градиента. Процентные значения будут линейно расположены на луче градиента.</dd>
</dl>
<h3 id="Синтаксис_2">Синтаксис</h3>
<pre class="syntaxbox notranslate"><code>radial-gradient(
[ [ circle || <a href="/en-US/docs/CSS/length"><length></a> ] [ at <a href="/en-US/docs/CSS/position_value"><position></a> ]? , |
[ ellipse || [ <a href="/en-US/docs/CSS/length"><length></a> | <a href="/en-US/docs/CSS/percentage"><percentage></a> ]{2} ] [ at <a href="/en-US/docs/CSS/position_value"><position></a> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [ at <a href="/en-US/docs/CSS/position_value"><position></a> ]? , |
at <a href="/en-US/docs/CSS/position_value"><position></a> ,
]?
<color-stop> [ , <color-stop> ]+
)
где <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
и<code> <color-stop> = <color> [ <percentage> | <length> ]?</code>
</code></pre>
<h2 id="Примеры">Примеры</h2>
<h3 id="Простой_градиент">Простой градиент</h3>
<div class="hidden">
<pre class="brush: html notranslate"><div class="radial-gradient"></div>
</pre>
<pre class="brush: css notranslate">.radial-gradient {
width: 240px;
height: 120px;
}</pre>
</div>
<pre class="brush: css notranslate">.radial-gradient {
background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
} </pre>
<p>{{EmbedLiveSample('Простой_градиент', 120, 120)}}</p>
<h3 id="Градиент_со_смещённым_центром">Градиент со смещённым центром</h3>
<div class="hidden">
<pre class="brush: html notranslate"><div class="radial-gradient"></div>
</pre>
<pre class="brush: css notranslate">.radial-gradient {
width: 240px;
height: 120px;
}</pre>
</div>
<pre class="brush: css notranslate">.radial-gradient {
background-image: radial-gradient(farthest-corner at 40px 40px,
#f35 0%, #43e 100%);
}</pre>
<p>{{EmbedLiveSample('Градиент_со_смещённым_центром', 240, 120)}}</p>
<div class="note">
<p><strong>Примечание:</strong> Дополнительные примеры можно найти в <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS градиентов</a>.</p>
</div>
<h2 id="Спецификация">Спецификация</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарии</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("css.types.image.gradient.radial-gradient")}}</p>
<h3 id="Сноски_к_Quantum_CSS">Сноски к Quantum CSS</h3>
<ul>
<li>Gecko имеет долгоиграющий баг благодаря которому значения вроде <code>radial-gradient(circle gold,red)</code> будут работать, даже несмотря на то, что пропущена запятая между <code>circle</code> и <code>gold</code> ({{bug(1383323)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизу в Firefox 57) исправляет этот баг.</li>
<li>Также в Gecko выражения с {{cssxref("calc")}} считаются недействительными — значение не валидно при использовании в radial-gradient() ({{bug(1376019)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизу Firefox 57) исправляет этот баг.</li>
</ul>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/CSS/Using_CSS_gradients">Использование CSS градиентов</a></li>
<li>Другие варианты градиентов: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}</li>
<li>{{cssxref("<image>")}}</li>
</ul>
|
