Question

我需要让我的盒子阴影看起来像一个边框：如果我的父母有一个插入的盒子阴影并且我在其中放了一个子div，那么盒子阴影应该越过子div，就像这里带边框所示： / p>

这个问题有什么类似的z索引，还是css hack？

Thanks

编辑：我需要使用框阴影插入+无边框或框搜索。我正在寻找黑客，只有盒子阴影才能实现。可能的hack是在子div上左右添加框阴影。

Answer 1

如果您想要一个不需要任何额外标记的解决方案，您可以使用＆＃34;：之前＆＃34;伪类选择器：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;
}

Answer 2

这是因为你的盒子阴影是插入的。意思是它会出现在方框内。
虽然您的嵌套div将覆盖它。使用边框适用于“框”的外部从CSS中删除inset将导致您所追求的效果查看更新的小提琴插入删除。 fiddle

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

<强>更新
要使插入框阴影可见，您可以使子div的宽度小于父级的4px像素。然后使用边距来正确定位div。但是我不确定这会完全实现你的目标吗？请参阅此fiddle。

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

更新2
这个“Hack”使用框阴影将叠加应用于两个元素。请参阅fiddle。

<强> 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

一种方法是不要制作盒子阴影inset，使其显示在框外。但是如果你真的想使用inset框阴影，你可以在容器元素中添加一个等于阴影厚度的填充：

.a {
  ...
  padding: 2px;
  box-shadow: 0 0 0 2px #000000;
}

Answer 4

添加：

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

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

Answer 5

给出主要元素position: relative，然后在该元素中创建另一个具有以下内容的div：

position: absolute;
width: 100%;
height: 100%;   
box-shadow: inset 0px 0px 0px 2px black;

它的作用是创建一个遍历您内容的不可见div，然后将框阴影应用于该div，它将位于先前覆盖阴影的所有元素之上。就像放置一块玻璃，将阴影蚀刻到其边缘上的元素上方。

盒子阴影在儿童元素？

5 个答案:

HTML

CSS