CSS div box z-index

Question

我创建了一个网站，我在其中使用了一个框阴影在主div框上添加阴影

box-shadow: 0 0 10px rgba(0,0,0,0.2);

问题在于，除了偏移其位置之外，您无法指定阴影应出现的位置。

这意味着我不能在盒子的两侧都有2个阴影，同时盒子的顶部或底部也没有阴影！ （至少不是我的估算）

我认为我可以做的是在我的“main-div”框的底部放置另一个“overlay-div”框，给它一个白色背景并将其覆盖在我想要隐藏的阴影上...... / p>

我的问题是“overlay-div”不仅覆盖了我想要隐藏的框，它还覆盖了以下div并覆盖了部分内容。

有没有办法有叠加，覆盖特定的盒子而不是另一个???

我尝试过z-index但它不起作用。我真的想在＃content-footer div的底部没有阴影，让它平滑到白色背景中。

这是我的代码：

<style>
#content-footer {
 float: left;
 width: 980px;
 height: 250px;
 padding: 30px 30px 0;
 background: #EBEBEB;
 background: -moz-linear-gradient(#EBEBEB 20%, white 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EBEBEB), color-stop(100%, white));
 box-shadow: 0 0 10px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#sitemap {
 background-color: white;
 height: 300px;
 float: left;
 width: 920px;
 margin: -130px 30px 0 30px;
 -webkit-border-bottom-left-radius: 5px;
 -webkit-border-bottom-right-radius: 5px;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 5px;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 box-shadow: 0 5px 5px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
 -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
</style>

<div id="content-footer">
    ... content ... 
</div>

<div id="sitemap">
   ... sitemap ...
</div>

这就是我想要实现的目标：

（http://dl.dropbox.com/u/5456769/gradeint-box-shadow.png）

Answer 1

如果我正确理解了您的帖子，您打算在#sitemap左侧，右侧和顶部以及 上方和底部都有阴影。

在这种情况下，here is a jsbin solution。

z-index您的努力无法正常工作，因为z-index仅适用于对其应用了fixed，relative或absolute定位的元素

至关重要的部分：

• #sitemap有position:relative
• #content-footer嵌套在#sitemap内且position:absolute，height:280px和bottom: -280px
• #sitemap和#content-footer具有相同的宽度

我建议使用this tool配置自定义的超兼容渐变。

Answer 2

尝试使用：after或：之前的伪选择器。 你也可以在一端使用透明背景，在另一端使用#fff。

    #content-footer {
 float: left;
 width: 980px;
 height: 250px;
 padding: 30px 30px 0;
 background: #EBEBEB;
 background: -moz-linear-gradient(#EBEBEB 20%, white 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EBEBEB), color-stop(100%, white));
 box-shadow: 0 0 10px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
position:relative;
}

#content-footer:after {
position: absolute;
content: "";
background-color: white;
 height: 300px;
 width: 920px;
 margin: -130px 30px 0 30px;
 -webkit-border-bottom-left-radius: 5px;
 -webkit-border-bottom-right-radius: 5px;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 5px;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 box-shadow: 0 5px 5px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
 -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

Answer 3

有一个非常简单的解决方法， 只需将内容页脚放在隐藏溢出且高度相同的div中

#content-footer-container {
  overflow:hidden;
  float: left;
  width: 100%;
  height: 280px; //+30px considering padding
}

就这么简单。 当宽度大于页脚div时，顶部和底部的任何阴影都将被裁剪掉，阴影到侧面将可见。