Как сделать тень вокруг блока css

Чтобы создать тень вокруг блока в CSS, вы можете использовать свойство box-shadow. Для этого нужно задать значения для горизонтального смещения (offset-x), вертикального смещения (offset-y), размытия (blur-radius) и цвета тени.

Пример:

.block {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Этот код создаст тень вокруг блока с размером размытия 10 пикселей, черного цвета с полупрозрачностью 0.5.

Также можно задать другие параметры, например, границу тени (spread-radius) или использовать несколько цветов для создания градиентной тени.

Примеры:

/* с размытием и границей тени */
.block {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}

/* градиентная тень */
.block {
  box-shadow: 0 0 10px 5px #c9e3ff inset,
              0 0 10px 5px rgba(0, 0, 0, 0.5);
}

Первый пример задает границу тени в 5 пикселей. Второй пример использует градиентную тень, где внутренняя тень имеет цвет #c9e3ff, а внешняя – черный цвет с полупрозрачностью 0.5. Важно помнить, что параметры box-shadow следуют в порядке offset-x, offset-y, blur-radius, spread-radius и цвет тени.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать тень вокруг блока css

Наш специалист свяжется с вами в ближайшее время и уточнит детали