如何创建两个边框-纯CSS

Question

我只是想达到与下图相同的效果。我希望头部有两个边框，一个比另一个更轻，给它一个浮雕的感觉。

在我问这个问题之前，我已经做了一些研究，并尝试了一些灵感来自网站的想法，比如:CSS，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的大纲属性，那么为什么不为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中删除高度。

Answer 2

尝试使用CSS框阴影创建“阴影”。例如：

#headerWrapper {
    box-shadow: 0 1px 0 rgba(255,0,0,0.8), 0 2px 0 rgba(0,255,0,0.8);
}

每个新阴影应该用逗号分隔。

这能做你想要的吗？

现在，浏览器对框阴影的支持非常好，但是您可能需要记住它。如果您使用所有的供应商前缀，那么除了IE8之外，几乎所有东西都支持它，有关更多信息，请参见：http://caniuse.com/css-boxshadow。