防止框阴影显示在另一个元素的顶部

Question

我一直在尝试制作一个部分和一篇文章，这样看起来文章是坐在使用框阴影部分的顶部。问题是，部分的模糊也蔓延到文章(当我只想文章的框阴影蔓延到部分)。我一直试图使用z-index来定位文章高于部分，因为我已经看到在许多其他回答问题的工作，但似乎没有工作，我不能为我的生活，弄清楚为什么。我想避免使用白框阴影方法，因为它很可能会影响文章中的任何内容，但任何有效的方法都很棒。这里是一个JSFiddle。我将不胜感激。谢谢。

基本HTML设置:

<article>article<br />article<br />article<br />article<br />I dont want the box shadow of the section overlapping this box here /</article>
<section>section<br />section<br />section<br />section<br />section<br />section<br />section<br />section<br />section</section>

CSS:

article {
    position: relative;
    z-index: 0;
    width: 600px;
    margin: 100px auto 0;
    padding: 20px;
    border: orange 1px solid;
    box-shadow: 0 0 100px 1px orange;
}
section {
    position: relative;
    z-index: -1;
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: orange 1px solid;
    box-shadow: 0 0 100px 1px orange;
    border-top: none;
}

Answer 1

z-index 's仅对已定位的元素有影响。给article和section一个位置position: relative

你仍然会看到box-shadow通过你的article思想，因为它的背景是透明的。给article添加背景色background: #FFF

article {
  width: 600px;
  border: orange 1px solid;
  box-shadow: 0 0 100px 1px orange;
  padding: 20px;
  margin: 100px auto 0;
  z-index: 0;
  position: relative;
  background: #FFF;
}
section {
  width: 400px;
  border: orange 1px solid;
  box-shadow: 0 0 100px 1px orange;
  border-top: none;
  padding: 20px;
  margin: 0 auto;
  z-index: -1;
  position: relative;
}

<article>article<br />article<br />article<br />article<br />I dont want the box shadow of the section overlapping this box here /</article>
<section>section<br />section<br />section<br />section<br />section<br />section<br />section<br />section<br />section</section>

JSFiddle版本

Answer 2

我刚才回答了一个类似的问题。下面是我放在一起的代码的演示

演示http://jsfiddle.net/DVWF8/1/

background: #fff;
border: 1px solid #211C18;
box-shadow: 2px 4px 20px #005377;
-moz-box-shadow: 2px 4px 20px #005377;
-webkit-box-shadow: 2px 4px 20px #005377;