z-index - 在内容下方插入框阴影

Question

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

举个例子:

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

<div>
   a
</div>

http://jsfiddle.net/MAckM/

您看到 a 位于框阴影的顶部。

如何让方框阴影位于 a 之上？

Answer 1

您需要在 div 中创建一个新元素，使用绝对定位，高度和宽度为 100%，然后为该元素添加框阴影。

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

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

编辑:

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

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

<div>
    a
</div>​