在背景图片中可以对图片进行圆角设置，但是这样是写死的。如下图：
情况分析：如果我们li标签中的文字变少了或者变多了，我们就需要重新定义背景图片。所以我们使用滑动门技术。它将图片特殊地方进行分割。宽度利用的是字体的宽度，在加上padding进行调整。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
li {
list-style: none;
float: left;
}
li a {
height: 35px;
background-image: url("bg_r1_c1.png");
background-repeat: no-repeat;
padding-left: 7px;
display: inline-block;
color: white;
}
li span {
height: 35px;
background-image: url("bg_r1_c2.png");
background-repeat: no-repeat;
background-position: right;
display: inline-block;
padding-right: 22px;
line-height: 35px;
}
a:hover {
background: url("blue_r1_c1.png");
}
a span:hover {
background: url("blue_r1_c2.png") right;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">
<span>百度一下</span>
</a>
</li>
<li>
<a href="#">
<span>百度</span>
</a>
</li>
<li>
<a href="#">
<span>中国新闻网</span>
</a>
</li>
</ul>
</body>
</html>
效果：
