CSS3 Тени бокса
CSS Свойство box-shadow
CSS Свойство box-shadow применяет тень к элементам.
В простейшем использовании вы указываете только горизонтальную тень и вертикальную тень:
Это желтый элемент <div> с черной тенью
Пример
div
{
box-shadow: 10px 10px;
}
Попробуйте сами »
Далее, добавить цвет в тень:
Это желтый элемент <div> с серой тенью
Пример
div
{
box-shadow: 10px 10px grey;
}
Попробуйте сами »
Далее, добавьте эффект размытия к тени:
Это желтый элемент <div> с размытой серой тенью
Пример
div
{
box-shadow: 10px 10px 5px grey;
}
Попробуйте сами »
Радиус распространения тени
Параметр spread определяет радиус распространения. Положительное значение увеличивает размер тени, отрицательное значение уменьшает размер тени.
Элемент <div> с размытой светло-синей рамкой-тенью с радиусом распространения 12px
Пример
Установите радиус распространения тени:
div
{
box-shadow: 10px 10px 5px 12px lightblue;
}
Попробуйте сами »
Параметр вставки
Параметр insert изменяет тень с внешней тени (начало) на внутреннюю тень.
Элемент <div> с размытым светло-голубым вставной рамкой-тенью
Пример
Добавьте параметр inset:
div
{
box-shadow: 10px 10px 5px lightblue inset;
}
Попробуйте сами »
Несколько теней
Элемент также может иметь несколько теней:
Пример
Добавьте несколько теней:
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Попробуйте сами »
Карточки
Вы также можете использовать это свойство box-shadow для создания бумажных карточек:
1
1 Января, 2016
Хардангер, Норвегия
Пример
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
Попробовать (Текстовая карточка) »
Попробовать (Карточка с изображением) »
CSS3 Упражнения
CSS Свойства тени
В следующей таблице перечислены свойства тени CSS:
| Свойство | Описание |
|---|---|
| box-shadow | Добавляет одну или несколько теней к элементу |
| text-shadow | Добавляет одну или несколько теней к тексту |