我有一个使用插入框阴影的容器。容器包含图像和文本。插图阴影显然对图像无效：
这里的白色部分是容器。它包含一个白色图像，并且插入了插入框阴影。
<main>
<img src="whiteimage.png">
</main>
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;
}
有没有办法使插图框阴影重叠图像？
解决方法
因为阴影是父容器的一部分，它呈现在图像下方。一个替代方案是将div放在图像上方的div上，如下所示：
<main>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" />
<div class="shadow"></div>
</main>
CSS：
.shadow {
position: absolute;
width: 100%;
height: 100%;
Box-shadow: inset 3px 3px 10px 0 #000000;
border-radius: 20px;
top: 0;
left: 0;
}
