CSS

Question

我创建了一个网站，我已经使用了一个箱子的影子放了一片阴影主DIV框格箱的z-index

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

的问题是，你不能指定阴影应该出现除了抵消其位置。

这是什么意思是我不能有两个阴影在箱子的两侧运行，同时也没有在箱子的顶部或底部留下阴影！ （至少不是我的算盘）

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

我的问题是，“叠加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。