0

这不是让其他人调试您的代码，而是我需要一点帮助来解决这个问题。

<!DOCTYPE html>
<head>
</head>
<body id="menubody">
<ul class="menubar">
<li><a>CONTACTUS</a></li>
<li><a>ABOUTUS</a></li>
<li><a>HOME</a></li>
<li><a>LINKS</a></li>
</ul>
</body>
</html>

CSS：

* {
    margin:0px;
    padding:0px;
}
#menubody {
    font-size:120%;
    background-color:#D4F1FA;
    padding:50px;
}
.menubar {
    font-family:verdana;
    font-weight:bold;
    list-style-type:none;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
}
.menubar li {
    background-color:#A88314;
    width:159px;
    text-align:center;
    position:relative;
    float:left;
}
.menubar a {
    color:#144213;
    text-decoration:none;
    display:block;
    width:159px;
    height:40px;
    line-height:40px;
    background-color:#70FA6B
}
.menubar li:hover>a {
    background-color:#A88314;
    color:#DAECF2
}

边框不是圆角的。有什么建议么？:)

4

1 回答 1

1

很简单，您的锚点没有任何边框半径，因此与 UL 边框重叠...对第一个孩子应用一个类，在左角（顶部和底部）有一个边框半径，另一个到最后一个孩子，右边也是如此。

像这样的东西：

.menubar > li:first-child a {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.menubar > li:last-child a {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

有任何问题，请告诉我

于 2013-07-19T19:54:29.727 回答