滾動內容的CSS框陰影

Question

我想要一個帶有滾動內容的插入框陰影的div。不幸的是，box-shadow不會在內容中的元素上播放，而是在背景上播放，但我希望它覆蓋內容元素。

我偶然發現了這個解決方案：http://jsfiddle.net/HPkd3/（via）。問題是，我無法讓它與我的滾動設置一起工作;如果我將面罩放置在滾動div內，陰影就會滾動 - 如果我將它放在div的外面，則滾動條上會留下陰影，看起來很奇怪。

任何想法如何得到這個權利？

編輯：一些示例代碼：http://jsfiddle.net/ZSpSS/2/

我想在這個例子中佈滿陰影的紅色正方形，而陰影應該是持久的，當我通過內容滾動。

Answer 1

您是否嘗試過這樣的事情：

CSS：

#test{ 
    width:500px; 
    height:200px; 
    overflow:auto; 
    -moz-box-shadow: inset 1px 1px 20px 4px black; 
    -webkit-box-shadow: inset 1px 1px 20px 4px black; 
    box-shadow: inset 1px 1px 20px 4px black; 
} 

HTML：

<div id="test"><p> 
sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd 
<br /></p></div> 

如果你能提供更多的細節，我可以用一個更具體的幫助回答

Answer 2

Here is one possible solution.

我評論了我的CSS樣式，你應該很容易理解我的html標記。這是我做的。

1. 創建兩個div
2. 一種是充當具有一個容器中的插圖框陰影.outer
3. 另一種包含插圖框陰影.inner-content
4. 我加overflow:scroll到.inner-content DIV應用您的滾動條。 （你也可以改變overflow:scroll到overflow:auto這也會給你一個滾動條

Answer 3

我完全有這個工作退房：

http://jsfiddle.net/yobert/6Ff4u/

注意紅色背景塊正確的「下」陰影

注意事項：要求你以像素爲單位猜測滾動條的大小，我敢打賭，有一種安全的方法可以用javascript來測量它，如果你只有一個垂直滾動條，因爲您不需要調整邊距底部，因此更簡單。

Answer 4

試試這個

box-shadow:1px 1px 1px 1px #000000 inset; pointer-events: none;