如何使这两个div框阴影合而为一？

Question

I have a banner right above a navigation menu. 我在导航菜单上方有一个横幅。 The two have their own container divs going horizontally across the screen. 这两个容器都有各自的容器div，它们在屏幕上水平分布。 I have box shadows on both of them to make it look like outer glow. 我在它们两个上都有盒子阴影，使其看起来像外在的光芒。 The issue is that the shadow breaks(as it's meant to) between the banner and the navigation. 问题是横幅广告和导航广告之间的阴影破裂了（这本来就意味着）。 Is there any way that I can modify my code to make it look like the shadows are one? 有什么方法可以修改代码以使其看起来像阴影一样？ Thanks for your time. 谢谢你的时间。

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

My HTML 我的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>

My CSS: 我的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;
}

Answer 1

The answer is yes but you'd need to rewrite your code and place the nav menu and center head banner in a wrapping div element then apply the shadow to that element. 答案是肯定的，但是您需要重写代码并将导航菜单和中心标题横幅放在环绕的div元素中，然后将阴影应用于该元素。 Right now you have 2 elements which are going to be stacked on one another. 现在，您将有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>

Answer 2

Take the drop shadows off of .bannerContainer and .toolbarContainer , then place a div around the outside of both of those and add the drop shadow there. .bannerContainer和.toolbarContainer阴影，然后在这两个外部放置div并在其中添加阴影。 You will have to put the <div id="toolbar"> outside of this div too. 您也必须将<div id="toolbar">放在此div之外。

如何使这两个div框阴影合而为一？

问题描述

2 个解决方案

解决方案1
0 2015-05-01 18:28:25

解决方案2
0 2015-05-01 18:30:08

如何使这两个div框阴影合而为一？

问题描述

2 个解决方案

解决方案1 0 2015-05-01 18:28:25

解决方案2 0 2015-05-01 18:30:08

解决方案1
0 2015-05-01 18:28:25

解决方案2
0 2015-05-01 18:30:08