边框问题。。。
我的css代码和老师几乎是一样的，为什么我写出来的用了select类选择器的左边框在底部的时候是断层的的，而老师是这样平滑连接的呢？
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;
}
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>
