子元素上的盒阴影？

Question

我需要让我的box-shadow看起来像边框: 如果我有一个带有内阴影的父元素，并在其中放置一个子div，则box-shadow应该像边框一样覆盖子div，就像这里显示的那样:

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

是否有类似于此问题的z-index或CSS hack？

Thanks

编辑：我需要使用内嵌的盒子阴影+无边框或盒子大小。我正在寻找通过仅使用盒子阴影来实现此目标的技巧。一个可能的技巧是在子div上左右添加盒子阴影。

- Plic Pl

---

为什么不直接使用 border 呢？ - Hashem Qolami

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

- TriangleJuice

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。但我不确定这是否完全实现了您想要的效果？请参考此例子

.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
这种“黑科技”在两个元素上应用了一个覆盖层，带有盒子阴影。详见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;
}

- Ashley Medway

---

嘿，谢谢你的回答。我需要使用盒子阴影内插。只是需要找到一种方法来实现这个。 - Plic Pl

嗯，谢谢，但内部div需要是200像素（父元素的100%）。 - Plic Pl

@PlicPl 我之前认为不可能只对左、上、右三个方向应用阴影，而不是底部？！ - Ashley Medway

@PlicPl 很酷，谢谢，每天都能学到新东西。我在我的新更新中做了一个“hack”。http://jsfiddle.net/7rRsw/5/ - Ashley Medway

@PlicPl 没问题，你得爱上 CSS :P - Ashley Medway

"这是因为你的盒子阴影是内嵌的。" ... 不，这是因为有人搞错了！在现实世界中，物体和事物产生的阴影不会被地球或其他“子对象”所隐藏。 - StefanNch

Answer 3

一种方法是不使用 inset，这样阴影会出现在盒子外部。但如果你确实想使用 inset 盒子阴影，可以将容器元素的填充设置为阴影的厚度：

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

- Arnelle Balane

Answer 4

添加：

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

给子元素加上标签，这样应该就能正常工作了。

- Sameh Shahin

---

我也发现了这个技巧，但它会导致子元素中可点击的元素无法被点击。 - Esger

Answer 5

给你的主元素添加 position: relative 属性，然后在该元素内创建另一个具有以下属性的 div 元素：

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

这个操作创建了一个不可见的div覆盖在你的内容上面，然后你把box-shadow应用到这个div上，它会覆盖之前遮挡阴影的所有元素。就像将一张有阴影刻边的玻璃放在你的元素上方。

- Eric