用于重叠式div的CSS3 box-shadow

Question

我试图用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;
}

为了获得理想的结果,我需要:

1. 隐藏主div的顶部阴影(没问题)
2. 将标题的底部阴影置于主div的前面,而不是现在的背后.

我一直在阅读很多关于盒子阴影的内容,但我还没有找到一个让我高兴的解决方案......任何想法？

Answer 1

这个jsfiddle做你想要的.

它的工作方式是使用一个主#wrap元素,使内容居中,并为绝对定位的#main元素创建一个坐标图.这是因为它的位置:相对CSS规则.您最终得到以下标记:

<div id="wrap">
    <header></header>
    <div id="main"></div>
</div>

将header然后被放置的这个内部和给定位置:相对于和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;
}