Как сделать адаптивный блок с тенью?

Для создания адаптивного блока с тенью в HTML, можно использовать комбинацию CSS свойств и значения. Вот пример кода:

HTML:

<div class="shadow-box">
   <!-- Ваше содержимое блока -->
</div>

CSS:

.shadow-box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 20px;
}

/* Примеры медиа-запросов для различных размеров экранов */
/* Можно настроить значение ширины и вызвать соответствующие стили */
@media screen and (max-width: 600px) {
  .shadow-box {
    /* Мобильные стили */
  }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  .shadow-box {
    /* Планшетные стили */
  }
}

@media screen and (min-width: 1025px) {
  .shadow-box {
    /* Стили для десктопных устройств */
  }
}

В этом примере мы используем CSS свойство box-shadow, чтобы добавить тень блоку. Значение 0 2px 4px rgba(0, 0, 0, 0.2) означает, что у блока будет горизонтальная тень без смещения вверх/вниз, размер тени составит 2 пикселя, размытие будет на уровне 4 пикселей, а цвет тени будет полупрозрачным, с помощью значения RGBA (красный, зеленый, синий, альфа-канал).

Для адаптивности блока мы используем медиа-запросы. При помощи медиа-запросов мы можем применять различные стили для разных размеров экрана. В примере выше, мы использовали несколько типичных размеров, таких как мобильные устройства (600 пикселей и меньше), планшеты (601 пиксель и больше, но меньше 1024 пикселя) и десктопные экраны (1025 пикселей и более).

Вы можете настраивать стили для каждого медиа-запроса внутри соответствующего блока @media. Таким образом, ваш блок с тенью будет адаптироваться к разным размерам экрана, обеспечивая лучшую читаемость и пользовательский опыт.