0

我试图在我的代码的 .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>

谢谢您的帮助。

4

3 回答 3

0

If I understand your question correctly, you can simply achieve it by setting the #boxShadow as:

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

You can take a reading of this for better understanding.

于 2013-03-16T01:27:38.743 回答
0

The only problem I see is with your code is just a typo in the boxShadow, otherwise it seems to work fine on this fiddle: typo fixed fiddle

Just needed a space between 10px and rgba.

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

Is this what you are looking for? Edited to remove right-side shadow.

Here's a full tutorial of box-shadow, including cross-platform (and older browser) browser-specific prefixes: CSS3 Box Shadow Tutorial

于 2013-03-16T01:29:30.507 回答
0

您可以尝试修改此：http: //jsfiddle.net/KyuH7/

<div id="box_wrapper">
   <div id="box">
   </div>
   <div id="box_shadow">
   </div>
</div>

#box_wrapper{
    width:300px;
    height:300px;
    position:relative;
    z-index:2;
}

#box_wrapper #box{
    width:300px;
    height:300px;
    position:absolute;
    background:#FFF;
    top:0;
    left:0;
    z-index:3;
}

#box_wrapper #box_shadow{
   width:290px;
   height:50px;
   background:#CCC;
   position:absolute;
   bottom:0;
   left:5px;
   z-index:0;
   box-shadow:0px 10px 5px rgba(0,0,0,.1)
}
于 2013-03-16T23:54:57.987 回答