在背景图片中可以对图片进行圆角设置，但是这样是写死的。如下图：
情况分析：如果我们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; ?????????????} ???????</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>效果：
CSS——滑动门
原文地址：http://www.cnblogs.com/wuqiuxue/p/7803467.html