个人中心
gpt4 book ai didi

html - 如何使这两个 div 框阴影显示为一个？

转载 作者：行者123 更新时间：2023-11-28 07:57:58 28 4
gpt4 key购买 nike

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

28 4 0
文章推荐： ios - 在 Alamofire 中发布 Json 字符串
文章推荐： javascript - 有没有办法延迟 SVG animateTransform 中的重启
文章推荐： html - 如何在父 block HTML 的 100% 上显示 block ？
文章推荐： html - 浏览器缓存干扰 css 样式更改？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com