css - 如何创建两个边框 - 纯 CSS

Question

我只是想实现与下图相同的效果*。我希望页眉有两个边框，一个比另一个浅，给人一种浮雕的感觉。

在我在这里问这个问题之前，我已经做了一些研究并尝试了从以下网站获得启发的想法:CSS-Tricks、Daverupert 等...但是他们正在添加大纲——在尝试之后它并没有真正起作用在现代浏览器上，那么旧浏览器呢!

*由于此时允许我发布图片，请引用此链接获取图片:http://postimg.org/image/4b6ne0qod/

请在此处查看我的网站:leo.meeped.co.uk 查看标题 - 您还会注意到它在思考边框之后有一个阴影，使它看起来像是边缘已折叠。

更新:我非常喜欢这种折叠效果，但是当您向下滚动到白色或灰色页面时，它会使标题淡出一点/不突出 - 因为它看起来像阴影与页面混合，因为它们是非常相关的颜色。因此，我们的想法是在当前边框下方添加另一个边框，以强调它的边缘。

希望我的问题很清楚，我正在寻求您的意见和帮助。

如果你想要我网站的 HTML 和 CSS，那么这里是:

     <!--Header--><header>
        <div id="headerWrapper">
            <div id="headerContent">

                <div id="headerLogo">
                    <a href="index.html"><img alt="loai design studio logo" src="assets/elements/logo.png"/></a>
                </div>

                <nav><ul id="mainMenu" class="snapjs-expand-left">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a>
                    <li><a href="about.html">About Me</a></li>
                    <li><a class="active" href="contact.html">Contact Me</a></li>
                    <li><a href="blog.html">Blog</a></li>
                </ul></nav>

            </div>
        </div>
    </header>




    /*HEADER////////////////////////////////////////////*/  
    /*Header Wrapper*/#headerWrapper {
 background-color: #FFFFFF;
 border-bottom: 5px solid #E8E8E8;

 width: 100%;
 position: fixed; 
 top: 0; left: 0; 

 z-index: 1000;

 -webkit-box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
 -moz-box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
 box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
         }

      /*Header Content Container*/#headerContent {
   padding: 0 20px;
          }

      /*Header Logo*/
     #headerLogo {
width: 130px;
margin: 19px 0;
float: left;
     }

    /*Main Menu*/
    #mainMenu {
         float: right;
         margin: 17px 0;
    }

#mainMenu li {
    float: left;
}

#mainMenu a {
    padding: 10px 15px;
    margin-left: 3px;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#mainMenu a:hover {
    color: #FFFFFF; 
    background-color: #4E6C98;
}   

#mainMenu a.active {
    color: #4E6C98;
    cursor: default;
}

#mainMenu a.active:hover {
    background-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
    background: transparent;
}

Answer 1

如果你只是想要两个边框而不使用 CSS 的 outline 属性，为什么不简单地为 div#headerWrapper 创建一个边框底部，为 div#headerContent 创建一个底部边框，使 headerWrapper 的底部更暗:

div#headerWrapper
{
  border-bottom: solid 1px #3D9ED5;
}

div#headerContent
{
  border-bottom: solid 1px #81CEFA;
  background-color: #54BEFB;
}

如果你想要你的图片的确切外观，你可以通过添加以下代码来实现(假设边框下面的部分应该是空的):

header
{
  height: 50px;
  background-color: #FBFBFB;
}

如果文本应该插入到图片的下半部分，请将其添加到外部 div 之后(在标题中)并从 CSS 中移除高度。