显示框阴影在文本上 [英] display box shadow above the text

问题描述

假设我有一个简单的div，其中包含一些段落。

Let's say I have a simple div with some paragraphs inside.

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

I want to achieve a fading effect on the bottom of the div.

>

我试图设置一个白色阴影

I have tried to set up a white shadow

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

但显然这没有效果，因为 box-shadow 总是出现在文本下。

but obviously this didn't work, since the box-shadow always appears under the text.

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

How can I accomplish this in pure CSS?

谢谢。

推荐答案

我能够用CSS复制效果，但它有点麻烦：

I was able to replicate the effect with CSS only, but it's a little hackish:

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

我把两个div作为兄弟姐妹：

I put two divs as siblings:

<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叠加层可能会更有效。

The only trouble is that for this to work, you must specify the height for the .shadow class. If it will always be the same size, then you can use this. Otherwise using a png overlay might be more effective.

像：

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

这篇关于显示框阴影在文本上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！