文本上方的显示框阴影

Question

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

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

---

我试图设置一个白色阴影

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

但显然这不起作用，因为box-shadow总是出现在文字下面。

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

感谢。

Answer 1

使用＆＃34;＆＃34;＆＃34; 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复制效果，但它有点像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 3

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

Answer 4

在所有其他div下方创建一个div，并为该div和顶部阴影设置负底边距。你可以做到，或者你可以做我做过的事。使用淡入淡出保存png图像并将其设置为位于包含文本的相对定位div底部的绝对定位div。