javascript - 子元素上的盒子阴影？

Question

我需要让我的 box-shadow 看起来像一个边框:如果我有一个带有 inset boxshadow 的父级并且我在其中放置了一个子 div，那么 box shadow 应该覆盖子 div，就像这里显示的带边框:

jsFiddle:http://jsfiddle.net/7rRsw/2/

这个问题是否有类似 z 索引或 css hack 的东西？

Thanks

编辑:我需要使用框阴影插入+无边框或框扣押。我正在寻找技巧，以便仅使用框阴影来实现这一点。一个可能的 hack 是在子 div 上左右添加框阴影。

Answer 1

如果你想要一个不需要任何额外标记的解决方案，你可以使用“:before”伪类选择器:http://jsfiddle.net/7rRsw/8/

HTML

<div class="a"><div class="b">No extra markup needed</div></div>

CSS

.a {
    width: 200px;
    float: left;
    height: 200px;
    margin-right: 100px;
    background-color: red;
    position: relative;
}

.a:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 200px;
    height: 200px;
    box-shadow: inset 0px 0px 0px 2px black;
    -webkit-box-shadow: inset 0px 0px 0px 2px black;
    -moz-box-shadow: inset 0px 0px 0px 2px black;
}

.b {
    width: 200px;
    height: 100px;
    background-color: yellow;
}