文本上方的显示框阴影

Question

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

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

---

我试图设置一个白色的阴影

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

但显然这不起作用,因为box-shadow总是出现在文本之下.

我怎样才能在纯CSS中实现这一目标？

谢谢.

Answer 1

那么使用"after"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 2

我只能用 CSS 来复制效果，但这有点黑客：

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