强制框阴影在内容的顶部 [英] Force Box-Shadow on top of Content

问题描述

我不明白为什么，但我的内容下面有一个插入盒阴影。

I don't understand why, but an inset box shadow is beneath my content.

这里有一个例子：

div {
   box-shadow:inset 0 0 10px black;
   height:300px;
   color:red;
}

​<div>
   a
</div>​

http://jsfiddle.net/MAckM/

您会看到 a

You see the a is on top of the box shadow.

如何让盒子的阴影在 a

How can I get the box shadow to be on top of the a?

推荐答案

您需要在div中创建一个新元素，

You need to make a new element inside the div, with absolute positioning and height and width of 100%, then give that element the box shadow.

HTML：

<div>
    <div></div>
    a
</div>​

CSS：

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}​

这里是 JSFiddle 。

编辑：

或者，您可以使用伪元素：

Alternatively, you can use a pseudo element:

HTML：

<div>
    a
</div>​

CSS：

div {
    height:300px;
    color:red;
    position:relative;
}

div:before {
    content:'';
    display:block;
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}​

JSFiddle 。

这篇关于强制框阴影在内容的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！