css – 在框内插入阴影

我不明白为什么，但是一个插件盒阴影在我的内容之下。

以下是一个例子：

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

​<div>
   a
</div>​

http://jsfiddle.net/MAckM/

你看到一个是在盒子的阴影顶部。

如何把盒子的阴影放在一个顶部？

解决方法

您需要在div内部创建一个新的元素，其绝对位置和高度和宽度为100％，然后给该元素包装盒阴影。

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。

编辑：

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

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。