子元素上的框阴影？

Question

我需要使我的长方体阴影看起来像一个边框：如果我有一个具有插入的长方体阴影的父对象，并且我在其中放置了一个子div，则长方体阴影应该覆盖子div，如图所示，并带有边框：

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

这个问题有没有类似于z索引或css黑客的东西？

Thanks

编辑：我需要使用框阴影插入无边框或框捕捉。我正在寻找黑客，使这只可能与盒影。一种可能的方法是在子div的左右两侧添加框阴影。

Answer 1

加：

z-index: -1; /** less than the parent in general */

到子元素，它应该可以工作。

Answer 2

这是因为你的盒子阴影被嵌入。
同时嵌套的div会覆盖它。使用边框适用于“框”的外部。
从CSS中删除inset将导致您所追求的效果。
请参阅更新的inset删除小提琴。小提琴

box-shadow: 0px 0px 0px 2px black;
-webkit-box-shadow: 0px 0px 0px 2px black;
-moz-box-shadow: 0px 0px 0px 2px black;

UPDATE
要使插页框阴影可见，可以使子div 4px像素的宽度小于父div。然后使用边距正确定位div。然而，我不确定这是否完全实现了你想要的？看这把小提琴。

.a{
    width: 200px;
    float: left;
    height: 200px;
    margin-right: 100px;
    background-color: red;
    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: 196px;
    height: 100px;
    background-color: yellow;
    margin:2px auto 0 auto;
}

UPDATE 2
这个哈克应用一个覆盖到两个元素与框阴影。见小提琴。

HTML

<div class="a">
    <div class="b">How it is (Yellow div covers the box shadow)</div>
    <div class="shadow">&nbsp;</div>
</div>

CSS

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

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

.shadow {
    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;
    position:absolute;
    top:0;
    width:200px;
    height:200px;
}

Answer 3

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

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

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