并不是要让其他人调试您的代码,但是,我需要一点帮助来解决这个问题。
<!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
}
边界不是圆形的。有什么建议么? :)
最佳答案
容易,您的锚点没有任何边界半径,因此与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;
}
有什么问题让我知道
关于html - 边框未在html中未四舍五入,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17754345/