为何在图像上没有嵌入框阴影功能? [英] Why doesn't inset box-shadow work over images?

问题描述

我有一个使用插入框阴影的容器.该容器包含图像和文本.嵌入阴影显然不适用于图像:

I have a container that uses inset box shadow. The container contains images and text. The inset shadow apparently does not work on images:

这里的白色部分是容器.它包含一个白色图像，并且有内嵌框阴影应用到该图像.

The white section here is the container. It contains a white image, and there is inset box shadow applied to it.

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

有没有办法使嵌入框阴影与图像重叠?

Is there a way to make the inset box shadow overlap images?

实时演示

推荐答案

因为阴影是其在图像下方渲染的父容器的一部分.一种替代方法是让div像这样在图像上方放置阴影:

Because the shadow is part of the parent container it renders below the image. One alternative is to have a div which places a shadow overtop the image like so:

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

编辑:我更新了小提琴，在阴影和img上添加了边框半径，从而解决了注释中确定的问题.

I've updated the fiddle to include border radius on the shadow and on the img which solves the issue identified in the comments.

https://jsfiddle.net/WymFE/3/

这篇关于为何在图像上没有嵌入框阴影功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！