html - CSS div框的z-index

我创建了一个网站，在其中使用框阴影在main-div框上放置阴影

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

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

这意味着我不能同时在框的顶部或底部都没有阴影的情况下在框的两边顺着两个阴影！ （至少我不认为）

我想我可以做的是将另一个框“ over-div”放置在“ main-div”框的底部，给它一个白色背景，然后将其覆盖在要隐藏的阴影上...

我的问题是“ 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）

最佳答案

尝试使用：after或：before伪选择器。
您也可以在一端使用透明背景渐变，在另一端使用#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);
}

关于html - CSS div框的z-index，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9627872/