类似重叠的div的CSS3长方体阴影
类似重叠的div的CSS3长方体阴影
提问于 2010-08-05 07:45:05
我正在尝试用css3来实现这个效果：
HTML代码干净利落地类似于
...
<header>
...
</header>
<div id="wrapper">
...
</div>
...就目前而言，css类似于
header {
display: block;
width: 900px;
height: 230px;
margin: 0 auto;
border: 1px solid #211C18;
...
box-shadow: 2px 4px 20px #005377;
-moz-box-shadow: 2px 4px 20px #005377;
-webkit-box-shadow: 2px 4px 20px #005377;
}
#wrapper {
width: 820px;
margin: 0 auto;
...
border-right: 1px solid #211C18;
border-bottom: 1px solid #211C18;
border-left: 1px solid #211C18;
...
box-shadow: 2px 4px 20px #005377;
-moz-box-shadow: 2px 4px 20px #005377;
-webkit-box-shadow: 2px 4px 20px #005377;
}为了获得想要的结果，我需要：
- 隐藏主目录的顶部阴影(这没问题)
- 将标题的底部阴影带到主目录的前面，而不是现在的后面。
我已经读了很多关于box- lot的书，但我还没有找到一个真正让我满意的解决方案。有什么想法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-08-05 07:59:38
这个jsfiddle可以做你想要的事情。
它的工作方式是使用一个主#wrap元素，该元素将内容居中并为绝对定位的#main元素创建坐标映射。它这样做是因为它的位置:相对CSS规则。您最终会得到以下标记：
<div id="wrap">
<header></header>
<div id="main"></div>
</div>然后，将索引放在这个容器中，并给出header：relative和一个z索引，以将其堆叠在#main容器之上。
最后，#main绝对位于header之下。CSS如下所示：
/* centre content and create coordinate map for absolutely positioned #main */
#wrap {
width: 300px;
margin: 20px auto;
position: relative;
}
header, #main {
background: #fff;
/* rounded corners */
border: 1px solid #211C18;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
/* dropshadows */
box-shadow: 2px 4px 20px #005377;
-moz-box-shadow: 2px 4px 20px #005377;
-webkit-box-shadow: 2px 4px 20px #005377;
}
header {
display: block;
width: 300px;
height: 50px;
/* stack above the #main container */
position: relative;
z-index: 2;
}
#main {
width: 200px;
height: 70px;
/* stack below the header and underlap it...if that's even a word */
position: absolute;
z-index: 1;
top: 40px;
left: 50px;
}Stack Overflow用户
发布于 2011-12-30 11:28:59
我只是幸运地使用了相对定位。
例如。
第一个div有一个长方体阴影和一个底边距。第二个div在阴影下滑动。
#firstdiv {width: 960px; box-shadow: 5px 5px 5px #ccc; margin-bottom: 10px;}
#seconddiv {width: 960px; position: relative; top: -10px;}这不是最好的解决方案，但它对我很有效。
Stack Overflow用户
发布于 2012-01-09 02:48:43
将位置设置为"relative“已经解决了这个问题！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3410727
复制相关文章
相似问题