css - 如何为可滚动的 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;
}