我在导航菜单上方有一个横幅。两者都有自己的容器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;
}

最佳答案

.bannerContainer.toolbarContainer删除阴影,然后在两个对象的外部放置一个div并在其中添加阴影。您也必须将<div id="toolbar">放在此div之外。

关于html - 如何使这两个div框阴影合而为一?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29992635/

10-12 12:50
查看更多