html - 页面上的 CSS3 DropShadow

Question

我正在尝试在网站的每个部分/页面下方创建一个阴影，但这样做时遇到问题。

网站演示：http ://www.sfu.ca/~jca41/stuph/test/parallax01/parallax01.html

HTML：

<section id="first" class="page shadow">        
  <article>first page</article> </section>
<section id="second" class="page shadow">
  <article>second page</article> </section>
<section id="third" class="page shadow">        
  <article>third page</article> </section>  
<section id="fourth" class="page shadow">
  <article>fourth page</article> </section>

CSS：

.page { height: 1000px; }
.shadow {
    -moz-box-shadow: 0 10px 10px #000;
    -webkit-box-shadow: 0 10px 10px #000;
    box-shadow: 0 10px 10px #000;
}
#first { background: url(img/01.png) no-repeat fixed; }
#second { background: url(img/02.jpg) no-repeat fixed; }
#third { background: url(img/03.jpg) no-repeat fixed; }
#fourth { background: url(img/04.jpg) no-repeat fixed; }

Answer 1

添加位置：相对于您的页面类，然后将 z-index 添加到每个部分，以便顶部的 z-index 比下面的大。