邊框問(wèn)題。。。
我的寫(xiě)出來(lái)的是第五個(gè)左邊框和第四個(gè)底邊框的連接處不是圓滑的,而是缺了一個(gè)像素的,但是老師的是圓滑的,請(qǐng)問(wèn)這是怎么回事?
我的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="#">規(guī)則</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;
}
2016-04-05
用一下border-radius 這個(gè)屬性吧