在网页设计中，使用插入框阴影在元素内创建深度和尺寸是一种常见技术。然而，在处理包含图像的容器时，事情并不总是那么简单。当嵌入框阴影似乎在嵌入图像上消失时，就会出现问题。
考虑原始问题中提供的示例：
<code class="css">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%;
}</code><code class="html"><main> <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png"> </main></code>
虽然目标是在容器（包括图像）周围应用嵌入框阴影，但它无法显示。为什么会出现这种情况？
图像缺少阴影的原因在于透明度。当图像具有透明背景时，它本质上是背景元素的窗口。在这种情况下，容器的背景是黑色的。结果，嵌入的阴影在图像的透明区域变得不可见。
要解决此问题，可以使用一个简单而优雅的解决方案：使用 CSS : 在伪元素之后。通过向容器添加 :after 伪元素，我们可以创建一个位于图像顶部的额外层并接收插入框阴影。
在下面更新的 CSS 片段中，我们应用 :after 伪元素
<code class="css">main::after {
box-shadow: inset 3px 3px 10px 0 #000000;
content: '';
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}</code>通过此修改，插图框阴影现在出现在图像的不透明和透明区域上，从而提供所需的阴影效果。
以上是为什么插入框阴影在透明背景的图像上消失？的详细内容。更多信息请关注PHP中文网其他相关文章！
