CSS 为什么 inset box-shadow 不适用于图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21414925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why doesn't inset box-shadow work over images?
提问by FalconC
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?
有没有办法让插入框阴影重叠图像？
回答by RyanS
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:
因为阴影是父容器的一部分，所以它呈现在图像下方。一种替代方法是使用 div 将阴影置于图像上方，如下所示：
<main>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" />
<div class="shadow"></div>
</main>
CSS:
CSS：
.shadow {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 3px 3px 10px 0 #000000;
border-radius: 20px;
top: 0;
left: 0;
}
Edit:I've updated the fiddle to include border radius on the shadow and on the img which solves the issue identified in the comments.
编辑：我已经更新了小提琴以在阴影和 img 上包含边框半径，这解决了评论中确定的问题。
回答by Rillus
Just to chime in on this, because I was just creating something similar...
只是插一句，因为我只是在创造类似的东西......
I hate polluting my markup with extra elements for the sake of styling, so the CSS solution is to use the :after pseudo element:
我讨厌为了样式而用额外的元素污染我的标记，所以 CSS 解决方案是使用 :after 伪元素：
main::after
{
box-shadow: inset 3px 3px 10px 0 #000000;
content: '';
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
It's probably too late for what you were trying to do, but is the better solution in my estimation.
您尝试做的事情可能为时已晚，但据我估计是更好的解决方案。
回答by brouxhaha
The reason it's not overlapping is because the image is inside the div, so the image is on top of it. The image is higher (closer to the user) than the div.
它不重叠的原因是因为图像在 div 内，所以图像在它上面。图像比 div 更高（更接近用户）。
You can change the image to use position: relative; z-index: -1, and have the containing div use a border instead of setting background color on the body. You'll need to use box-sizing: border-boxto include the border in the width of the div.
您可以更改图像以使用position: relative; z-index: -1，并让包含的 div 使用边框而不是在主体上设置背景颜色。您需要使用box-sizing: border-box将边框包含在 div 的宽度中。
body {
background-color: #FFF;
}
main {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: 60px solid black;
box-shadow: inset 3px 3px 10px 0 #000000;
box-sizing: border-box;
}
img {
z-index:-1;
position: relative;
}
回答by bencergazda
For those, who're using absolute-positioned, full-size :before/:after pseudo elements, consider using pointer-events: noneon the pseudo-element so the original elements remain clickable.
对于那些使用绝对定位、全尺寸 :before/:after 伪元素的人，请考虑在伪元素上使用pointer-events: none，以便原始元素保持可点击。
回答by j08691
You could set the image as the div's background instead:
您可以将图像设置为 div 的背景：
background-image:url(http://www.placehold.it/500x500)
回答by James Lewis
One simple fix if you are clever with your decimals is to store your content in a separate div which you then select and implement a certain number of pixels from the top.
如果您对小数很聪明，一个简单的解决方法是将您的内容存储在一个单独的 div 中，然后您从顶部选择并实现一定数量的像素。
For example, let's say your header has a height of 50px. You could begin your #content div id 53.45px from the top (or whatever height your drop shadow is) and then your shadow would appear above the images.
例如，假设您的标题的高度为 50 像素。你可以从顶部开始你的#content div id 53.45px（或你的阴影的任何高度），然后你的阴影会出现在图像上方。
One issue with this is that if you are using a rather transparent shadow, the more transarent it is the more tacky it may look by implementing this css.
一个问题是，如果您使用的是相当透明的阴影，则它越透明，通过实施此 css 看起来就越俗气。
In practice the code would be as follows:
在实践中，代码如下：
HTML:
HTML：
<header>
Whatever's in your header
</header>
<div id="content>
Page content
</div>
CSS:
CSS：
header {
height: 50px;
box-shadow: 0 5px 5px rgba(0,0,0,1);
}
#content {
top: 55px;
}
回答by Mathieu Ferraris
https://stackoverflow.com/a/21415060/6235358that's a great way to do it but we can do it in a better way using the ::afterpseudo-class so you'll not have to add an empty <div>to your HTML
https://stackoverflow.com/a/21415060/6235358这是一个很好的方法，但我们可以使用::after伪类以更好的方式做到这一点，因此您不必<div>向 HTML添加空
回答by Daniel
As Rilus mentioned we could use a pseudo class. Unfortunately this does not seem to work on an img tag for some reason however we can use a combination of inner and outer containers to achieve the affect we need.
正如 Rilus 提到的，我们可以使用伪类。不幸的是，由于某种原因，这似乎不适用于 img 标签，但是我们可以使用内部和外部容器的组合来实现我们需要的效果。
.outer:hover .inner:after {
position: absolute;
content: '';
color: white;
display:block;
bottom: -0px;
right: -0px;
width: 100%;
height: 100%;
z-index: 11;
border: solid 10px red;
}
http://jsbin.com/kabiwidego/1/
http://jsbin.com/kabiwidego/1/
not sure about ie 10 though as it seems to handle pseudo classes that are absolutely positioned slightly differently to most browsers.
不确定 ie 10，因为它似乎处理的伪类与大多数浏览器的绝对定位略有不同。
