Функция radial-gradient
Функция radial-gradient задава радиален
градиент. Тази функция се прилага към свойства, които
задават изображение на фон: background,
background-image
или изображение на граница: border-image,
background-image-source.
Синтаксис
селектор {
background: radial-gradient([форма тип позиция], цвят1 размер1, цвят2 размер2...);
}
Стойности
| Стойност | Описание |
|---|---|
| форма |
Допустими стойности:
ellipse елиптичен градиент (по подразбиране),
circle кръгъл градиент.
|
| тип |
Задава разтягане на градиента.
Допустими стойности:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| позиция |
След ключовата дума at
се задава позиция във всякакви единици за размер
или с помощта на ключови думи top, bottom,
left, right, center
в различни комбинации.
|
| цвят1 | Начален цвят на градиента във всякакви единици за цвят. |
| цвят2 | Краен цвят на градиента във всякакви единици за цвят. |
| размер | Задава обхват на определен цвят от градиента във всякакви единици за размер. |
Стойности за тип
| Стойност | Описание |
|---|---|
closest-side |
Формата на градиента съвпада с най-близката до него страна на блока. |
closest-corner |
Формата на градиента се изчислява на базата на информация за разстоянието до най-близкия ъгъл на блока. |
farthest-side |
Градиентът се разпространява до най-далечната страна на блока. |
farthest-corner |
Формата на градиента се изчислява на базата на информация за разстоянието до най-далечния ъгъл на блока. |
Забележка
Типът и формата могат да се разменят, но позицията трябва да е в края на първия параметър. Типът на градиента и неговият размер не работят един с друг (логично, те влизат в конфликт). Печели размерът.
Пример . Най-простият вариант
Нека просто зададем начален и краен цвят:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Пример . Добавяне на позиция
Нека зададем позиция на центъра:
30px - отстъп отляво, 100px - отстъп отгоре:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Пример . Позиция в проценти
Нека зададем позиция на центъра в проценти:
30% - отстъп отляво, 50% - отстъп отгоре:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Пример . Позиция с ключова дума
Могат да се използват ключови думи
top, bottom, left,
right, center в различни
комбинации. Нека поставим, например, градиента
вдясно в центъра:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Пример . Размер на градиента
В този случай градиентът ще работи така:
от 0px до 20px ще бъде чист
червен цвят, от 20px до 60px - градиент
от червено към синьо, след 60px - чист
син цвят:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Пример . Няколко цвята един след друг
В този случай градиентът ще работи така:
от 0px до 20px ще бъде чист
червен цвят, от 20px до 40px
ще бъде чист син цвят, от 40px
до 60px - градиент от син към зелен,
след 60px - чист зелен:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Пример . Размер + позиция
Нека едновременно зададем размери за различни цветове и позиция на центъра на градиента:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Пример . Форма на градиента
Формата на градиента се задава с първия параметър
и може да приема 2 стойности: circle
(кръгъл градиент) или ellipse (елиптичен
градиент, по подразбиране). Защо тогава досега
не сме виждали елиптични градиенти, въпреки че
той се задава по подразбиране? Защото досега
формата на блоковете беше квадратна. Ако променим
формата на правоъгълна, ще видим елиптичен
градиент:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Пример . Кръгъл градиент
Нека направим кръгъл градиент в правоъгълен
блок. За целта задаваме форма на градиента с първия параметър
чрез ключовата дума
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Пример . Добавяне на позиция
Нека към предишния код добавим и позиция на градиента:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Пример . Тип farthest-corner + circle
Формата на градиента се изчислява на базата на информация за разстоянието до най-далечния ъгъл на блока:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Пример . Тип farthest-corner + ellipse
Формата на градиента се изчислява на базата на информация за разстоянието до най-далечния ъгъл на блока:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Пример . Тип farthest-side + circle
Градиентът се разпространява до най-далечната страна на блока:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Пример . Тип farthest-side + ellipse
Градиентът се разпространява до най-далечната страна на блока:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Пример . Тип closest-corner + circle
Формата на градиента се изчислява на базата на информация за разстоянието до най-близкия ъгъл на блока:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Пример . Тип closest-corner + ellipse
Формата на градиента се изчислява на базата на информация за разстоянието до най-близкия ъгъл на блока:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Пример . Тип closest-side + circle
Формата на градиента съвпада с най-близката до него страна на блока:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Пример . Тип closest-side + ellipse
Формата на градиента съвпада с най-близката до него страна на блока:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Вижте също
-
функцията
linear-gradient,
която създава линеен градиент -
функцията
repeating-linear-gradient,
която създава повтарящ се линеен градиент -
функцията
repeating-radial-gradient,
която създава повтарящ се радиален градиент
