Понимание проблемы тени вложенных блоков над изображениями

В веб-дизайне использование теней вложенных блоков для создания глубины и размера внутри элементов является распространенным методом. Однако при работе с контейнерами, содержащими изображения, это не всегда просто. Проблема возникает, когда кажется, что тень вставленного блока исчезает поверх встроенных изображений.

Случай невидимых теней

Рассмотрим пример, приведенный в исходном вопросе:

body {
  background-color: #000000;
}

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: inset 3px 3px 10px 0 #000000;
}

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

Хотя цель состоит в том, чтобы применить тень внутри контейнера, включая изображение, она не появляется. Почему это происходит?

Проблема прозрачности изображения

Причина отсутствия тени на изображениях кроется в прозрачности. Когда изображение имеет прозрачный фон, оно, по сути, является окном для элемента фона. В этом случае фон контейнера черный. В результате вложенная тень становится невидимой на прозрачных областях изображения.

Преодоление барьера прозрачности

Чтобы обойти эту проблему, доступно простое и элегантное решение: использование CSS :после псевдоэлемента. Добавив псевдоэлемент :after в контейнер, мы можем создать дополнительный слой, который будет располагаться поверх изображения и получать тень от вставки.

В обновленном фрагменте CSS ниже мы применяем псевдоэлемент :after элемент в контейнер

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

Благодаря этой модификации тень вставленного блока теперь появляется как над непрозрачными, так и над прозрачными областями изображения, создавая желаемый эффект тени.