文本上方的顯示框陰影

Question

假設我有一個簡單的div，裏面有一些段落。

我想達到的DIV底部的漸變效果。

---

我試圖建立一個白色的影子

box-shadow: inset 0 -15px 10px white; 

但顯然這並不工作，因爲box-shadow總是下的文字出現。

如何在純CSS中完成此操作？

謝謝。

Answer 1

我能夠複製僅適用於CSS的效果，但它是一個小的hackish：

http://jsfiddle.net/EaXTB/1/

我把兩個div作爲兄弟：

<div class="container"> 
    <div class="shadow"></div> 
    <div class="copy"> 
    <p>Lorem ipsum dolor sit amet, ...</p> 
    </div> 
</div> 

以及位於它們絕對：

.container { position:relative; } 

.shadow { 
    -webkit-box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1); 
    -moz-box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1); 
    box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1); 
    height: 200px; 
    width: 300px; 
    z-index: 100; 
    position:absolute; 
} 

.copy { 
    max-height: 200px; 
    width: 300px; 
    overflow: hidden; 
    z-index: 0; 
    position: absolute; 
} 

唯一的麻煩就是對於這個工作時，您必須指定.shadow類的高度。如果它將始終是相同的大小，那麼你可以使用它。否則使用PNG覆蓋可能會更有效。

喜歡的東西：

.shadow { 
    background: url(overlay.png) repeat-x bottom; 
} 

Answer 2

在所有其他div下創建一個div，併爲該div和頂部投影設置負底部邊距。你可以做到這一點，或者你可以做我所做的。用淡出保存一個PNG圖像，並將其設置爲絕對定位的div，位於包含文本的相對定位的div的底部。

Answer 3

什麼用 「後」 CSS選擇器？它甚至與IE8的工作：http://caniuse.com/#search=after

.container{ 
    position: relative; 
    height: 100px; 
    overflow: hidden; 
} 

.container:after{ 
    content: ""; 
    position: absolute; top: 0; bottom: 0; left: -15px; right: -15px; 
    box-shadow: inset white 0 -15px 10px; 
} 

我使用負左邊和右邊放箱內主箱外，以避免對兩側的陰影。

Answer 4

div { 
    height:300px; 
    color:red; 
    overflow-y: scroll; 
} 

div:after { 
    content: ""; 
    box-shadow: 0px -50px 50px -50px #000 inset; 
    position:fixed; 
    top: 250px; 
    left:0; 
    width:100%; 
    height:50px; 
    overflow: hidden; 
}