Question

我只想尝试达到与下图*相同的效果。我希望Header有两个边框，一个比另一个更亮，给它一种浮雕的感觉。

在我在这里提出这个问题之前，我已经做了一些研究并尝试了以下网站的想法：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

如何创建两个边框 - 纯CSS

2 个答案: