CSS3箱子阴影在孩子的顶部 [英] CSS3 box shadow on top of children

问题描述

如何获取插入的CSS3框阴影来渲染其子元素？

How do I get an inset CSS3 box shadow to render on top of its children elements?

问题：

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

推荐答案

..（ ）

您需要通过添加一个div覆盖阴影..

you would need to rework your html a bit by adding a div to overlay the shadow..

<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有阴影..

and your CSS to make the new div have the shadow..

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

这篇关于CSS3箱子阴影在孩子的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！