我只是想实现与下图相同的效果*。我希望页眉有两个边框,一个比另一个浅,给人一种浮雕的感觉。
在我在这里问这个问题之前,我已经做了一些研究并尝试了从以下网站获得启发的想法: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;
}
最佳答案
如果你只是想要两个边框而不使用 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 中移除高度。
关于css - 如何创建两个边框 - 纯 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18671996/