重叠式 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 的前面，而不是像现在这样放在后面。

我已经阅读了很多关于 box-shadow 的内容，但我还没有找到真正令我满意的解决方案......有什么想法吗？

Answer 1

这jsfiddle做你想做的。

它的工作方式是使用一个主要的 #wrap 元素，该元素将内容居中并为绝对定位的 #main 元素创建一个坐标图。它这样做是因为它的position:relative CSS 规则。您最终得到以下标记:

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

然后将 header 放在其中并给定 position: relative 和 z-index 以将其设置为堆叠在 #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;
}