让 CSS inset box-shadow 出现在内部背景之上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6658350/
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
get CSS inset box-shadow to appear on top of inner backgrounds
提问by Mark Kahn
I want a CSS inset box-shadow to appear on top of the elements inside of the container with the box-shadow, specifically background colors of child-elements.
我想要一个 CSS inset box-shadow 出现在带有 box-shadow 的容器内部元素的顶部，特别是子元素的背景颜色。
Demo: http://jsfiddle.net/Q8n77/
演示：http: //jsfiddle.net/Q8n77/
<div class="parent">
foo
<div class="content">bar</div>
</div>
<style>
.parent {
box-shadow : inset 0 0 5px 0 black;
}
.content {
background : #EEE;
}
</style>
Any ideas? Can do whatever with the HTML, but need to be able to click-through, so no 100% width/height DIVs on top of everything.
有任何想法吗？可以用 HTML 做任何事情，但需要能够点击，所以没有 100% 宽度/高度 DIV 在所有内容之上。
采纳答案by xec
If all you need is to have the inset shadow show through background colors, you can use transparent rgba(or hsla) colors rather than hex codes;
如果您只需要通过背景颜色显示插入阴影，您可以使用透明的rgba（或 hsla）颜色而不是十六进制代码；
.parent {
box-shadow: inset 0 0 5px 0 black;
}
.content {
background-color: rgba(0, 0, 0, .2); /* .2 = 20% opacity */
}
Demo at http://jsfiddle.net/Q8n77/7/
回答by trgraglia
Not everyone has the ability to change HTML structure. If you can only access the CSS, you could try the following from this post: https://stackoverflow.com/a/13188894/491044
不是每个人都有能力改变 HTML 结构。如果您只能访问 CSS，您可以从这篇文章中尝试以下操作：https: //stackoverflow.com/a/13188894/491044
Alternatively, you can use a pseudo element:
或者，您可以使用伪元素：
HTML:
HTML：
<div>
a
</div>?
CSS:
CSS：
div {
height:300px;
color:red;
position:relative;
}
div:before {
content:'';
display:block;
box-shadow:inset 0 0 10px black;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}?
回答by xec
you could try to position an overlay div on top of your parent with position: absolute; and give that the shadow (untested theory) with something like this:
您可以尝试使用 position: absolute; 在父级顶部放置一个覆盖 div；并给出这样的阴影（未经测试的理论）：
HTML
HTML
<div class="parent">
<div class="overlay"></div>
foo
<div class="content">bar</div>
</div>
CSS
CSS
.parent {
position: relative;
}
.content {
background : #EEE;
}
.parent .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow : inset 0 0 5px 0 black;
}
回答by Jason Gennaro
One possibility is to play with the padding.
一种可能性是使用padding.
.parent {
box-shadow : inset 0 0 5px 0 black; padding:.23em;
}
回答by Maurice
Adding this approach since this is how I solved my version of this problem.
添加此方法，因为这是我解决此问题版本的方法。
I basically add a ::before, or another element with a drop shadow in the parent, but offset it so only the shadow part is showing. Also I give the parent a overflow:hidden. This way, the content should still be interactive. :)
我基本上在父元素中添加了一个 ::before 或另一个带有阴影的元素，但将其偏移以便仅显示阴影部分。我也给父母一个溢出：隐藏。这样，内容应该仍然是交互式的。:)
Mileage may vary depending on exact markup of course. But thought I should add this here.
当然，里程可能会因精确标记而异。但我想我应该在这里添加这个。
codepen: http://codepen.io/mephysto/pen/bNPVVr
代码笔：http://codepen.io/mephysto/pen/bNPVVr
.parent {
background:#FFF;
width: 500px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.parent::before{
content:"";
display:block;
width:100%;
height:25px;
margin-top:-25px;
box-shadow : 0px 0px 25px 0px rgba(0,0,0,0.9);
}
回答by Thomas Decaux
You can set box-shadow on both parent and child.
您可以在父和子上设置 box-shadow。
回答by Sidney Veiga
If you need shadow on top only, this will do it:
如果您只需要顶部阴影，则可以这样做：
.element
{
box-shadow:inset 0px 3px 3px #BBB;
}
