孩子们身上的盒子阴影

Question

如何在其子元素之上渲染嵌入式CSS3 box-shadow？

问题：

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

Answer 1

为避免使用其他元素，可以使用css伪元素。试试这个demo。

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

基本上这个css为你创造了额外的元素。请注意pointer-events:none允许点击事件通过此元素。

请注意，pointer-events:none在某些移动设备上无法正常使用触摸滚动功能（点按/录制效果很好）。因此，我最终没有使用插入阴影。

Answer 2

不能直接从css完成..（如果超过重叠元素，它不是阴影）

你需要通过添加一个div（或使用miguelcobain's answer建议的伪元素）重新设置你的html来覆盖阴影和你的CSS以使新的div具有阴影.. < / p>

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

Answer 3

将任何子项的背景颜色更改为RGBA（这只能在理解它的浏览器中设置，方便地，任何可以处理阴影的浏览器）：

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

请注意，只要背后的背景是白色，两种颜色（#EEE，RGBA( 0, 0, 0, .066)）就是相同的。

演示，因为人们似乎无缘无故地投票：http://jsfiddle.net/6NrkR/

Answer 4

我建议您使用box-shadow以及-moz-box-shadow和-webkit-box-shadow。

这是未来（与Opera 10.5;）兼容。