Css 文本上方的显示框阴影

假设我有一个简单的div，里面有一些段落

我想在div的底部实现淡入效果

---

我试着设置一个白色阴影

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

但显然这不起作用，因为

框阴影总是出现在文本下方

我如何在纯CSS中实现这一点

谢谢。
在所有其他div下方创建一个div，并为该div设置负底边距和上下阴影。你可以那样做，也可以像我一样。保存一个带有淡入淡出的png图像，并将其设置为绝对定位的div，该div位于包含文本的相对定位div的底部。
我只能用CSS复制效果，但这有点太粗糙了：


我把两个div作为兄弟：

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

唯一的问题是，要使其工作，必须指定
.shadow
类的高度。如果它总是相同的大小，那么你可以使用这个。否则，使用png覆盖可能更有效

比如：

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

使用“after”css选择器怎么样？它甚至可以与IE8协同工作：

我使用负片左、右将内框置于主框外，以避免侧面的阴影。
提醒我前景图像CSS规则会派上用场。Do
top:0；右：0；底部：0；左：0而不是设置高度和宽度。也不需要z索引。这是一种糟糕的方法。它会阻止文本，所以你不能选择它。这是一个更干净的版本，我也使用它。“它甚至可以与IE8一起工作”，但box shadow不能，所以谁在乎IE8D没错，所以我想你可以使用这个技巧，使用位于“after”块底部的背景图像，而不是“box shadow”。
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;
}

.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;
}

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;
}