用CSS轻松实现圆角

body {

margin:0;

padding:0;

font-family:Tahoma;

font-size:12px;

font-weight:bold;

background-color:#fff;

text-align:center;

}

#tabs{

margin-left:auto;

margin-right:auto;

margin-top:40px;

width:100%;

background:#fff;

line-height:normal;

}

#tabs ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabs li {

display:inline;

margin:0;

padding:0;

}

#tabs a {

float:left;

<!--背景图片的定位->

background:url("left.gif") no-repeat left top;

margin:0;

<!--下面的这个8px是left.gif的宽度，以保证背景图片衔接顺畅->

padding:0 0 0 8px;

text-decoration:none;

cursor:hand;

}

#tabs a span {

float:left;

display:block;

<!--背景图片的定位->

background:url("right.gif") no-repeat right top;

padding:5px 15px 4px 6px;

color:#ccc;

cursor:hand;

}

#tabs a:hover span {

color:#FFF;

}

#tabs a:hover {

<!--背景图片的定位，这个30px是背景图片的一半高度，实现背景切换效果->

background-position:0% -30px;

}

#tabs a:hover span {

<!--背景图片的定位，这个30px是背景图片的一半高度，实现背景切换效果->

background-position:100% -30px;

}

<div id="tabs">

<ul>

<li><a href="#" title="Link"><span>Link</span></a></li>

<li><a href="#" title="My Link"><span>My Link</span></a></li>

<li><a href="#" title="More Longer"><span>More Longer</span></a></li>

<li><a href="#" title="Go"><span>Go</span></a></li>

<li><a href="#" title="GuestBook"><span>GuestBook</span></a></li>

<li><a href="#" title="Search"><span>Search</span></a></li>

</ul>

</div>