html - CSS3 Shadowbox - 仅在底部

Question

我试图在代码的 .top_section 底部放置一个阴影。但是，我无法使其工作。我有两个部分(顶部和底部)，阴影需要低于 .top_section

代码如下:

CSS:

.top_section {
    background-image: url(../images/background.png);
    background-repeat: no-repeat;
}

#boxShadow{box-shadow: 10px 10pxrgba(0, 0, 0, .4);} 

.bottom_section {
background-image: url(../images/background.png);
}

HTML:

<div class="container-fluid top_section">
<div id="boxShadow">
<section>

    <div class="row-fluid">
        <div class="span4 offset4">
        <br />
            <img src="images/logo.png" width="400" height="400" image alt="image" />
        </div>
    </div>

<div class="row12">
        <h3><p class="text-center">ANIMATOR & DIGITAL ILLUSTRATOR</p></h3>
        <h4><p class="text-center">I'M MARK FROM SINGAPORE, I DESIGN & MAKE THINGS MOVE.   </p></h4>
        <h4><p class="text-center">I AM CURRENTLY FREELANCING AND STUDYING AT ANIMATION MENTOR.</p></h4>
        <br />
        <br />
 </div>

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span1 offset4">
            <a href="#" class="thumbnail">
                <img src="images/MAIL_icon.png" width="50" height="50" image alt="image" />
            </a>
        </li>
        <li class="span1">
        <a href="#" class="thumbnail">
            <img src="images/DRIBBBLE_icon.png" width="50" height="50" image alt="image" />
            </a>
         </li>
         <li class="span1">
        <a href="#" class="thumbnail">
            <img src="images/TWITTER_icon.png" width="50" height="50" image alt="image" />
            </a>
         </li>
         <li class="span1">
        <a href="#" class="thumbnail">
            <img src="images/INSTAGRAM_icon.png" width="50" height="50" image alt="image" />
            </a>
         </li>
    </ul>
</div>

</section>

</div>

</div>

感谢您的帮助。

Answer 1

如果我正确理解你的问题，你可以简单地通过将 #boxShadow 设置为:

#boxShadow {
    box-shadow: 0px 10px rgba(0, 0, 0, .4);
}

---

您可以阅读this以便更好地理解。