如何创建两个边框 - 纯 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 中删除高度。

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