孩子们头顶的盒子阴影

不能直接从css完成。( 如果它位于重叠元素之上,则不是阴影 )

您需要通过添加一个div(或者按照 miguelcobain's 答案)覆盖阴影和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, 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>

为了避免使用额外的元素,可以使用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 允许单击事件通过此元素。

记住 指针事件:无 在一些移动设备上,触摸滚动效果不好(点击/录音效果很好)。因为这个,我最终没有使用嵌入阴影。

将任何子项的背景色也更改为rgba(这只在理解它的浏览器中设置,方便地说,这是任何可以处理阴影的浏览器):

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

注意这两种颜色( #EEE , RGBA( 0, 0, 0, .066) )只要它们后面的背景是白色,它们就完全一样。

演示,因为人们似乎无缘无故地投了反对票: http://jsfiddle.net/6NrkR/

我建议使用 box-shadow 随着 -moz-box-shadow 和 -webkit-box-shadow 。

这是未来(和Opera10.5;)兼容的。