如何让这两个div的盒子阴影显示为一个？

时间：2015-05-01 18:18:51

标签： html css css3

导航菜单上方有一条横幅。这两个有自己的容器div在屏幕上水平移动。我在它们上面都有盒子阴影，使它看起来像外部发光。问题是横幅和导航之间的阴影破裂（就像它的意思）。有什么方法可以修改我的代码，让它看起来像阴影是一个？谢谢你的时间。

http://i.imgur.com/dJ69OyV.gif

我的HTML 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blah Blah</title>
        <link href="assets/css/theme.css" rel="stylesheet" type="text/css">
        <link href="assets/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
    <body>
        <div class="wrapperOuter">
            <header>
                <div id="bannerContainer">
                    <div id="banner">
                        <h1>Scott <span class="green">H.</span> Lacey</h1>
                        <p>Web Developer <span class="green">&spades;</span> Photographer <span class="green">&spades;</span> Musician</p>
                    </div>
                </div>
                <div id="toolbarContainer">
                    <nav>
                        <ul>
                            <li><a href="index.html" title="Home Page">Home</a></li>
                            <li><a href="blog.html" title="My Blog">Blog</a></li>
                            <li><a href="portfolio.html" title="My Portfolio">Portfolio</a></li>
                            <li><a href="services.html" title="My Services">Services</a></li>
                            <li><a href="resume.html" title="My Resme">Resume</a></li>
                            <li><a href="about.html" title="About Me">About</a></li>
                            <li><a href="contact.html" title="Contact">Contact</a></li>
                        </ul>
                    </nav>
                    <div id="toolbar">
                        <div id="social">
                            <label>Connect With</label>
                            <ul>
                                <li><a href="#" title="Scott on Facebook"><i class="fa fa-facebook-square"></i></a></li>
                                <li><a href="#" title="Scott on Twitterk"><i class="fa fa-twitter-square"></i></a></li>
                                <li><a href="#" title="Scott on Instagram"><i class="fa fa-facebook-"></i></a></li>
                                <li><a href="#" title="Scott on LinkedIn"><i class="fa fa-linkedin-square"></i></a></li>
                            </ul>
                        </div>
                        <div id="search">
                            <form action="#" method="POST">
                                <input type="text" name="searchCriteria" size="30" placeholder="Enter search text, then press enter.">
                            </form>
                        </div>
                    </div>
                </div>
            </header>
        </div>
    </body>
</html>

我的CSS：

@charset "utf-8";
/* CSS Document */
span.green {
    color: #66cc00;
}
body {
    background: url(../img/bodyBackground.gif) repeat-x #000;
    padding: 0;
    margin: 0;
    font-family: Verdana;
    font-size: 1em;
    color: #666666;
}

a {
    color: #66cc00;
    text-decoration: none;
    border-bottom: 1px dotted #66cc00;
}
a:hover {
    color: #666666;
}
#wrapperOuter {
    margin: 0;
    padding: 0;
}
header {
    margin: 0;
    padding: 0;
}
#bannerContainer {
    background: url(../img/themeSprite.gif) 0 0px;
    height: 148px;
    border-bottom: 1px solid #333;
    margin: 0;
    padding: 0;
}
#banner {
    background-image: url(../img/themeSprite.gif);
    background-position: 0px -210px;
    height: 148px;
    margin: 0px auto;
    width: 960px;
    border-width: 0px 1px;
    border-color: #666;
    border-style: solid;
    background-repeat: repeat-x;
    box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5), 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 10px 10px 0px rgba(255, 255, 255, 0.2);
    text-align: center;

}
#banner h1 {
    margin: 0px;
    padding-top: 25px;
}
#banner p {
    color; #999;
}
#toolbarContainer {
    background-color: #222;
    border-bottom: 1px solid #666;
    box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
    margin: 0px;
    padding: 0px;
}

nav {
    background-image: url(../img/themeSprite.gif);
    background-position: 0px -153px;
    margin: 0px;
    padding: 0px;
    width: 960px;
    margin: 0px auto;
    height: 52px;
    border: 1px solid #000;
    box-shadow: 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 5px 15px 0px rgba(255, 255, 255, 0.2), 0px -5px 15px 0px rgba(0, 0, 0, 0.2);
}
nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
nav ul li {
    float: left;
    display: inline;
    border-left: 1px solid #333;
    border-right: 1px solid #666;
    height: 52px;
    box-shadow: 15px 0 15px -2px rgba(0, 0, 0, .2);
}
nav ul li a {
    display: block;
    margin: 0px;
    border-bottom: 0;
    color: #333;
    height: 52px;
    padding: 15px 25px;
}


#toolbar {
    width: 960px;
    margin: 0px auto;
    padding: 15px 0;
    overflow: auto;
}
#social {
    float: left;
}
#social label {
    float: left;
    display: block;
    padding-right: 10px;
}
#social ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#social ul li {
    float: left;
    display: inline;
    margin: 0px 5px;
    padding: 0;
}
#social ul li a {
    color: #666;
    border: 0;
    font-size: 18px;
}
#search {
    float: right;
}

#search input {
    background: #333;
    border: 1px solid #666;
    box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
    color: #666;
    padding: 10px;
}

2 个答案:

答案 0 :(得分：0)

答案是肯定的，但您需要重写代码并将导航菜单和中心标题横幅放在包装div元素中，然后将阴影应用于该元素。现在你有2个元素将相互堆叠。 

<html>
    <head></head>
        <style>
            .main {
                width: 100%;
            }
            .box1 {
                margin: 0 -2px;
                width: 50%;
                height: 400px;
                background: red;
                display: inline-block;
            }
            .box1inner {
                margin: auto;
                width: 70%;
                height: 50px;
                background: blue;
                -webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
                -moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
                box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
            }   
            .box2 {
                margin: 0 -2px;
                width: 50%;
                height: 400px;
                background: orange;
                display: inline-block;
            }
            .box2wrapper {
                margin: auto;
                width: 70%;
                -webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
                -moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
                box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
            }
            .box2inner {
                height: 50px;
                background: blue;
            }            
        </style>
    </head>
    <body>
        <div class="main">
            <div class="box1">
                <div class="box1inner">
                </div>
                <div class="box1inner">
                </div>
            </div>
            <div class="box2">
                <div class="box2wrapper">
                    <div class="box2inner">
                    </div>
                    <div class="box2inner">
                    </div>
                </div>
            </div>
            <div class="box3">
            </div>
        </div>

    </body>
</html>

答案 1 :(得分：0)

从.bannerContainer和.toolbarContainer上取下阴影，然后在两者的外侧放置一个div并在那里添加投影。你也必须把<div id="toolbar">放在这个div之外。

相关问题
最新问题