边框问题。。。-慕课网

边框问题。。。

来源：10-1 编程挑战

脑吉吉_

2016-04-05 10:14

我的写出来的是第五个左边框和第四个底边框的连接处不是圆滑的，而是缺了一个像素的，但是老师的是圆滑的，请问这是怎么回事？

我的html代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>tab1</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="notice" class="notice">
<div id="noticeTitle" class="noticeTitle">
<ul>
<li>
<a href="#">公告</a>
</li>
<li>
<a href="#">规则</a>
</li>
<li>
<a href="#">论坛</a>
</li>
<li>
<a href="#">安全</a>
</li>
<li class="select">
<a href="#" >公益</a>
</li>
</ul>
</div>
</div>
</body>
</html>

css代码：

*{
margin:0;
padding:0;
list-style:none;
font-size:12px;
}
.notice{
width:298px;
height:98px;
margin:10px;
border:1px solid #eee;
overflow:hidden;
}
.noticeTitle{
height:27px;
position:relative;

}
.noticeTitle ul{
position:absolute;
width:301px;
left:-1px;
}
.noticeTitle li{
float:left;
width:58px;
height:26px;
line-height:26px;
text-align:center;
overflow:hidden;
padding:0 1px;
background:#f7f7f7;
border-bottom:1px solid #eee;

}
.noticeTitle li.select{
background:#FFF;
border-bottom:#FFFFFF;
border-left:1px solid #eee;
border-right:1px solid #eee;
padding:0;
}
.noticeTitle li a:link,.noticeTitle li a:visited{
text-decoration: none;
color:#000;
}
.noticeTitle li a:hover{
color:#F90;
}