如何获得一个插入CSS3框阴影渲染在其子元素的顶部？
问题：
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：
#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,.55);
-webkit-Box-shadow: inset 0 0px 4px rgba(0,.55);
}
.chatmessage{
padding: 4px 2px;
}
.chatmessage b{
margin-right: 2px;
}
.chatmessage:nth-child(2n) {
background: #EEE;
}
解决方法
不能直接从css ..(它不是阴影，如果它超过重叠的元素)
你将需要通过添加一个div重叠的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 class="shadow"></div>
</div>
和你的CSS让新的div有阴影..
#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,.55);
}