如何为可滚动的div设置固定的底部阴影？

Question

我想为一个div保留一个固定位置的box-shadow，但会有一个可滚动的内容。为了使它更容易理解，它会像这样工作：http://jsfiddle.net/Dud8V/ - 即使div正在滚动，如何让阴影保持在它的位置？

谢谢。

Answer 1

您可以使用固定的背景http://codepen.io/anon/pen/zGIrf

#chatroom {
  position: relative;
  height:50px;
  overflow: scroll;
  background:linear-gradient(to bottom, 
    blue 0 ,
    pink 50px) no-repeat top;/*linear-gradient()  can be replaced by an image url(myImage)  to include older browser */
  background-size:100% 50px;
  background-attachment:fixed;
}

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