Question

对不起另一个新手问题，但对于我的生活，我无法弄清楚如何摆脱叠加在这个非常简单的导航菜单上的每个圆形导航按钮的矩形边框。如果你放大，你可以看到我正在谈论的内容或俯视下面我发布的图片。 Link to what it looks like on the web

我非常感谢有人帮助我，并且提前非常感谢你。我也很感激我对我的布局的任何评论，因为我只是在学习如何做到这一点。

HTML：

<body>
  <div id="wrapper">
    <div id="header">
      <h1> Welcome to ChirogGeek.com!</h1>
    </div>

    <div id="navMenu">
      <ul>
        <li><a href="../home.html">Introduction</a></li><li><a href="#">Methods</a></li>
        <li><a href="#">Discussion</a></li>                 
        <li><a href="#">Conclusion</a></li>    
      </ul>
    </div>

    <div style="clear: both;"></div>
  </div> <!--close wrapper -->
</body>

CSS：

* {
  margin: 0;
  float: 0;
}

body {
  background-color:#CFF;
  font-family:"Comic Sans MS", cursive;
}

#wrapper {
  background-color:#FF9;
  width: 800px;
  height: 600px;
  margin: 30px auto;
}

#header {
  float:left;
  background-color:#39C;
  height: 100px;
  width:100%;
  text-align:  center;
  line-height:100px;
  font-family:"Comic Sans MS", cursive
}

#navMenu {
  float:left;
  height: 100px;
  width: 100%;
  background-color:#006;
}

#navMenu ul {
  font-size: 14px;
}

#navMenu li {
  margin-right: 5px;
  float: left;
  background: #999;
  list-style-type: none;
}

#navMenu a {
  display: block;
  height: 25px; width: 150px;
  border-radius: 5px;
  color: white;
  border: 1px #FFF solid;
  background-color: #666;
  line-height: 25px;
  text-decoration: none;
  font-family:"Comic Sans MS", cursive;
  text-align: center;
}


/*link colors*/

#navMenu a:visited {
  color: red;
  text-decoration: none;
  background: transparent;
}

#navMenu li:hover > a {
  background-color: #999;
  text-decoration: none;
  background: transparent;
}

#navMenu a:hover {
  color: #000;
  text-decoration: none;
  background: transparent;
}

#navMenu a:active {
  color: #0F0;
  text-decoration: none;
  background: transparent;
}

Unwanted rectangular border beneath rounded corners

Here's what it looks like After removing the border rule

Answer 1

好的，我复制了你的代码，我得到的是按钮填充区域外的边框。这将发生，因为您在css中指定了“白色”边框。

您可以删除css代码中的[border：1px #FFF solid;]并保持[border-radius：5px;]不变。额外的边界将消失。

Answer 2

Here is a link to a codepen。我所做的就是删除列表中的背景。没有必要在li和anchor标签上设置背景。这就是它越过边界的原因：你必须在li和a上设置边界半径。但你真正需要做的就是从背景中脱离背景。您可以看到它在代码中被注释掉了。这就是我改变的一切。

Answer 3

。。我有一个你构建的示例代码。我在下面的链接中放了一个图像。看。代码如下所示：

http://payaupload.ir/up/92/12/1393784266.jpg

HTML：

<body>
<div id="wrapper">
<div id="header">
      <h1> Welcome to ChirogGeek.com!</h1>
    </div>
<div id="navMenu">
  <ul>
    <li><a href="../home.html">Introduction</a></li><li><a href="#">Methods</a></li>
    <li><a href="#">Discussion</a></li>                 
    <li><a href="#">Conclusion</a></li>    
  </ul>
</div>
<div style="clear: both;"></div>
</div> <!--close wrapper -->
</body>

CSS：

* {
  margin: 0;
  float: 0;
}
body {
  background-color:#CFF;
  font-family:"Comic Sans MS", cursive;
}
#wrapper {
  background-color:#FF9;
  width: 800px;
  height: 600px;
  margin: 30px auto;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
}

#header {
  float:left;
  background-color:#39C;
  height: 100px;
  width:100%;
  text-align:  center;
  line-height:100px;
  font-family:"Comic Sans MS", cursive;
  border-radius: 30px 30px 0 0;
  -moz-border-radius: 30px 30px 0 0;
  -webkit-border-radius: 30px 30px 0 0;
}
#navMenu {
    float:left;
    height: 100px;
    width: 100%;
    background-color:#2760C9;
}
#navMenu ul {
    margin:0;
}
#navMenu ul li {
    float:left;
    padding: 35px 10px 0 0;
    list-style: none;
}
#navMenu ul li a {
    color:#070;
    text-decoration:none;
    padding: 6px;
    background-color:#7EDAED;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
#navMenu ul li a:hover {
    color:#005B00;
    text-decoration:none;
    background-color:#BAEBF5;
}

边框半径不完全适用于简单的水平导航按钮......

3 个答案: