了解图像上的插入框阴影问题

在网页设计中，使用插入框阴影在元素内创建深度和尺寸是一种常见技术。然而，在处理包含图像的容器时，事情并不总是那么简单。当嵌入框阴影似乎在嵌入图像上消失时，就会出现问题。

隐形阴影的情况

考虑原始问题中提供的示例：

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

通过此修改，插图框阴影现在出现在图像的不透明和透明区域上，从而提供所需的阴影效果。