如何获得一个插入CSS3框阴影渲染在其子元素的顶部？
问题：
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,.55);
- -webkit-Box-shadow: inset 0 0px 4px rgba(0,.55);
- }
- .chatmessage{
- padding: 4px 2px;
- }
- .chatmessage b{
- margin-right: 2px;
- }
- .chatmessage:nth-child(2n) {
- background: #EEE;
- }
解决方法
不能直接从css ..(它不是阴影，如果它超过重叠的元素)
你将需要通过添加一个div重叠的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 class="shadow"></div>
- </div>
和你的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,.55);
- }
