Html 孩子们顶部的盒子阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2402473/
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
box-shadow on top of children
提问by Ronald
How do I get an inset CSS3 box-shadowto render on top of its children elements?
如何让插入的 CSS3box-shadow呈现在其子元素之上？
Problem:
问题：
HTML:
HTML：
<div id="chatroom">
<div class="chatmessage"><b>User 1:</b>Test</div>
<div class="chatmessage"><b>User 2:</b>Test</div>
<div class="chatmessage"><b>User 1:</b>Test</div>
<div class="chatmessage"><b>User 2:</b>Test</div>
</div>
CSS:
CSS：
#chatroom{
border: 1px solid #CCC;
height: 135px;
font-size: 0.75em;
line-height: 1.2em;
overflow: auto;
-moz-box-shadow: inset 0 0px 4px rgba(0,0,0,.55);
-webkit-box-shadow: inset 0 0px 4px rgba(0,0,0,.55);
}
.chatmessage{
padding: 4px 2px;
}
.chatmessage b{
margin-right: 2px;
}
.chatmessage:nth-child(2n) {
background: #EEE;
}
采纳答案by Gabriele Petrioli
cant be done directly from css.. (it is not shadow if it goes above overlapping elements)
不能直接从 css 中完成 ..（如果它超过重叠元素就不是阴影）
you would need to rework your html a bit by adding a div (or use a pseudo element as suggested by miguelcobain'sanswer) to overlay the shadow and your CSS to make the new div have the shadow..
您需要通过添加一个 div（或使用miguelcobain 的回答建议的伪元素）来覆盖阴影和 CSS 来使新的 div 具有阴影，从而稍微修改一下 html 。
#chatroom {
border: 1px solid #CCC;
height: 135px;
font-size: 0.75em;
line-height: 1.2em;
overflow: auto;
position: relative;
}
.shadow {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
-moz-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);
-webkit-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);
box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);
}
.chatmessage {
padding: 4px 2px;
}
.chatmessage b {
margin-right: 2px;
}
.chatmessage:nth-child(2n) {
background: #EEE;
}<div id="chatroom">
<div class="chatmessage"><b>User 1:</b>Test</div>
<div class="chatmessage"><b>User 2:</b>Test</div>
<div class="chatmessage"><b>User 1:</b>Test</div>
<div class="chatmessage"><b>User 2:</b>Test</div>
<div class="shadow"></div>
</div>回答by miguelcobain
To avoid the use of an additional element, you can use css pseudo-elements. Try this demo.
为了避免使用额外的元素，你可以使用 css 伪元素。试试这个演示。
#chatroom {
position: relative;
}
#chatroom:before {
content: "";
/* Expand element */
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
-moz-box-shadow: inset 0 0 8px rgba(0,0,0,.55);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.55);
box-shadow: inset 0 0 8px rgba(0,0,0,.55);
/* Disable click events */
pointer-events: none;
}
Basically this css creates that additional element for you. Notice the pointer-events:noneto allow click events to pass through this element.
基本上这个 css 为你创建了额外的元素。注意pointer-events:none允许点击事件通过这个元素。
Keep in mind that pointer-events:nonedoesn't work well on some mobile devices regarding touch scrolling (clicking/taping works well). I ended up not using inset shadows at all because of this.
请记住，pointer-events:none在某些移动设备上，关于触摸滚动（单击/点击效果很好）效果不佳。因此，我最终根本没有使用插入阴影。
回答by Mark Kahn
Change the background-color of any children to also be RGBA (this only gets set in browsers that understand it which, conveniently, is any browser that can handle the shadow):
将任何子项的背景颜色也更改为 RGBA（这仅在理解它的浏览器中设置，方便的是，可以处理阴影的任何浏览器）：
.chatmessage:nth-child(2n) {
background : #EEE;
background : RGBA(0, 0, 0, .066);
}
Note that the two colors (#EEE, RGBA( 0, 0, 0, .066)) are identical as long as the background behind them is white.
请注意，这两种颜色 ( #EEE, RGBA( 0, 0, 0, .066)) 是相同的，只要它们背后的背景是白色即可。
Demo since people seem to be down voting this for no reason: http://jsfiddle.net/6NrkR/
演示，因为人们似乎无缘无故地拒绝投票：http: //jsfiddle.net/6NrkR/
