Html 盒子阴影在孩子们身上

如何获得嵌入CSS3

框阴影

以在其子元素上进行渲染

问题:

HTML:

---

不能直接从css中完成。。（如果它位于重叠元素上方，则不是阴影）

您需要通过添加一个div（或使用answer建议的伪元素）来覆盖阴影和CSS，使新div具有阴影，从而稍微修改html

聊天室{ 边框：1px实心#CCC； 高度：135px； 字体大小：0.75em； 线高：1.2米； 溢出：自动； 位置：相对位置； } .影子{ 位置：绝对位置； 左：0px； 顶部：0px； 右：0px； 底部：0px； -moz盒阴影：嵌入0像素4像素rgba（0,0,0,55）； -webkit盒阴影：嵌入0像素4像素rgba（0,0,0,55）； 盒影：嵌入0像素4像素rgba（0,0,0,55）； } .聊天室留言{ 填充物：4px2px； } .聊天室留言b{ 右边距：2px； } .chatmessage:第n个子项（2n）{ 背景：#EEE； }

用户1：测试
用户2：测试
用户1：测试
用户2：测试

将任何子级的背景颜色也更改为RGBA（这仅在理解RGBA的浏览器中设置，方便的是，可以处理阴影的浏览器）：

请注意，这两种颜色（

#EEE

，

RGBA（0,0,0,066）

）是相同的，只要它们后面的背景是白色

---

演示因为人们似乎无缘无故地否决了这一点：

为了避免使用额外的元素，您可以使用css伪元素。试试这个

基本上，这个css为您创建了额外的元素。请注意

指针事件：none

允许单击事件通过此元素

---

请记住，

指针事件：无

在某些移动设备上不适用于触摸滚动（单击/点击效果良好）。由于这个原因，我最终根本没有使用嵌入阴影。

我有一个后续问题。如您所见，聊天室的溢出设置为“自动”，因此一旦内容足够多，它就可以滚动。滚动div时，shadow元素也会滚动。有没有简单的方法来匹配尺寸？我试着用scrollHeight设置阴影的高度，但这似乎不太可靠。有什么想法吗？所以我们基本上又在做黑客了。这是可悲的（它可以工作，但在我的情况下无法使用。我有按钮，无法单击任何东西。但如果有人想将其添加到图像中，这真是个不错的小技巧。@LoïcFaure Lacroix，在这种情况下，您可以使用css属性（）在

.shadow

元素上..@gabykag.Petrioli

指针事件：无

完全不起作用。（在

上测试：：在
伪元素之后。）介意解释一下为什么在它运行良好并且是比公认答案更好的解决方案时被否决吗？任何支持
box shadow
的浏览器都支持RGBA。这似乎是一个糟糕的解决方案。但是在实践中它看起来很好。所以我建议+1。如果#chatroom元素是滚动元素，则效果不太好。有什么想法吗？@KimballRobinson我修复它的方法是创建一个额外的div，一个外部有阴影，一个内部有卷轴。
<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>

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

.chatmessage:nth-child(2n) {
    background : #EEE;
    background : RGBA(0, 0, 0, .066);
}

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