Question

我有一个导航栏，里面有三个链接。如果你仔细观察，你会发现悬停和活动锚上的深绿色顶部边框不会覆盖棕色边框。有没有办法让它做到这一点？

这就是它的样子;

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  background-color: #C8E6C9;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 10% 0 10%;
}

header, ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #4CAF50;
}

h1 {
  margin: 0;
  border-bottom: 1px solid #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

li {
  float: left;
  margin: 0 0 0 0;
}

h1, li a {
  display: block;
  color: #FFFFFF;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid #4CAF50;
  border-top: 6px solid #4CAF50
}


/*link actions*/

li a.active {
  background-color: #795548;
  border: 2px solid #795548;
  border-top: 6px solid #388E3C;
}

li a:hover {
  background-color: #FDD835;
  border: 2px solid #795548;
  border-top: 6px solid #388E3C;
  color: #795548;
}

li a.active:hover {
  background-color: #FDD835;
  border: 2px solid #795548;
  border-top: 6px solid #388E3C;
}

a:first-child {
  text-decoration: none;
  color: #FFFFFF;
}

a:first-child:hover {
  color: #795548;
}

<body>
  <noscript>Please Use JavaScript you loser.</noscript>
  <div class="container">
    <header>
      <nav>
        <h1><a href="index.html">My Website</a></h1>
        <ul>
          <li><a href="index.html" class="active">Home</a></li>
          <li><a href="page2.html">About</a></li>
          <li><a href="page3.html">Getting Started</a></li>
        </ul>
      </nav>
    </header>
  </div>
</body>

Answer 1

这就是边界相遇的方式。我建议使用盒子阴影而不是顶部边框

注意：

您正在使用overflow:hidden上的ul清除浮动广告。这将阻止这种技术的运作。我建议使用另一种clearfix方法。

＆＃13;
＆＃13;
* { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; font-weight: 300; background-color: #C8E6C9; margin: 0; padding: 0; } .container { margin: 0 10% 0 10%; } header, ul { list-style-type: none; margin: 0; padding: 0; float: left; width: 100%; background-color: #4CAF50; } h1 { margin: 0; border-bottom: 1px solid #FFFFFF; font-family: 'Roboto', sans-serif; font-weight: 400; } li { float: left; margin: 0 0 0 0; } h1, li a { display: block; color: #FFFFFF; padding: 14px 16px; text-decoration: none; border: 2px solid #4CAF50; border-top: none; box-shadow: 0 -6px 0px 0px #4CAF50; } /*link actions*/ li a.active { background-color: #795548; border: 2px solid #795548; border-top: none; box-shadow: 0 -6px 0 0px #388E3C; } li a:hover { background-color: #FDD835; border: 2px solid #795548; border-top: none; box-shadow: 0 -6px 0 0px #388E3C; color: #795548; } li a.active:hover { background-color: #FDD835; border: 2px solid #795548; border-top: none; box-shadow: 0 -6px 0px 0px #388E3C; } a:first-child { text-decoration: none; color: #FFFFFF; } a:first-child:hover { color: #795548; }
＆＃13;
<div class="container"> <header> <nav> <h1><a href="index.html">My Website</a></h1> <ul> <li><a href="index.html" class="active">Home</a> </li> <li><a href="page2.html">About</a> </li> <li><a href="page3.html">Getting Started</a> </li> </ul> </nav> </header> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

正如@Paulie_D评论的那样，锚标签顶部边框中的棕色是顶部绿色和周围棕色边框之间的交点。因为你的li的背景颜色已经是棕色，我建议删除棕色边框，如下所示：

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  background-color: #C8E6C9;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 10% 0 10%;
}

header, ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #4CAF50;
}

h1 {
  margin: 0;
  border-bottom: 1px solid #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

li {
  float: left;
  margin: 0 0 0 0;
}

h1, li a {
  display: block;
  color: #FFFFFF;
  padding: 14px 16px;
  text-decoration: none;
  border-top: 6px solid #4CAF50
}

 h1 {
  border: 2px solid #4CAF50;
}


/*link actions*/

li a.active {
  background-color: #795548;
  border-top: 6px solid #388E3C;
}

li a:hover {
  background-color: #FDD835;
  border: 2px solid #795548;
  border-top: 6px solid #388E3C;
  color: #795548;
}

li a.active:hover {
  background-color: #FDD835;
  border: 2px solid #795548;
  border-top: 6px solid #388E3C;
}

a:first-child {
  text-decoration: none;
  color: #FFFFFF;
}

a:first-child:hover {
  color: #795548;
}

<body>
  <noscript>Please Use JavaScript you loser.</noscript>
  <div class="container">
    <header>
      <nav>
        <h1><a href="index.html">My Website</a></h1>
        <ul>
          <li><a href="index.html" class="active">Home</a></li>
          <li><a href="page2.html">About</a></li>
          <li><a href="page3.html">Getting Started</a></li>
        </ul>
      </nav>
    </header>
  </div>
</body>

注意：我还删除了你的li的后备绿色边框，仅适用于h1。

完全打造顶部边框封面边框

2 个答案: