CSS Box Shadow

Свойство box-shadow CSS

CSS box-shadow Свойство applies shadow to the element.

Самый простой способ - указать только горизонтальное и вертикальное размытие:

желтый <div> элемент с черным box-shadow

Пример

div {
  box-shadow: 10px 10px;
}

попробуйте сами

Далее, добавьте цвет к тени:

желтый <div> элемент с серым box-shadow

Пример

div {
  box-shadow: 10px 10px серый;
}

попробуйте сами

Далее, добавьте эффект размытия тени:

желтый <div> элемент, с размытым box-shadow

Пример

div {
  box-shadow: 10px 10px 5px серый;
}

попробуйте сами

карточка

Вы также можете использовать box-shadow Создание效果的纸质卡片:

1
January 1, 2021
Кофе
Кофе

Пример

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;
}

Попробуйте сами: бумажная картаПопробуйте сами: изображение карты

Свойства тени CSS

В таблице ниже перечислены свойства тени CSS:

Свойства Описание
box-shadow Добавление одной или нескольких теней к элементу.
text-shadow Добавление одной или нескольких тени к тексту.