圆角背景在各大网站经常看到，不过当列表的字数不定时，则会导致圆角标签的长度也不是定值。如果要做下面的效果图：
那么该如何去做呢？我们可以设想，要使得一个未知长度的标签具备圆角背景自适应的功能。用一个标签肯定无法达到的。于是我们可以考虑使用两个标签，这里我们采用的是a 标签里面套 span ，a标签占用的左边圆角背景，而span标签则占用右边圆角背景（当然这些都是在给对应标签加了左或右 padding的情况下，圆角背景才会正常）。
下面是所用到的圆角背景：
注意点：
圆角背景一定要尽量长，否则当标签文字过长时，会出现左边圆角背景白色空隙的情况。
还有圆角背景的底色要与父级元素的背景色一致。如果圆角背景的底色是透明的，则右边圆角背景因此而呈现方形，从而无法达到圆角的效果。
<style>
em{font-style:normal;}
ul li{list-style:none;}
.box{width:200px;margin:30px auto;padding:10px;}
.box ul li{float:left;margin:5px;word-break:keep-all;}
.box ul li a{display:inline-block;height:25px;line-height:25px;padding-left:5px;text-decoration:none;color:#000;}
.box ul li a:hover{background:url(r_bg.png) 0 0 no-repeat;color:#fff;}
.box ul li a em{display:inline-block;padding-right:5px;}
.box ul li .cur{background:url(r_bg.png) left 0 no-repeat;color:#fff;}
.box ul li .cur em,.box ul li a:hover em{background:url(r_bg.png) right 0 no-repeat;}
</style>
<div class="box">
<ul>
<li><a href="#" class="cur"><em>测试</em></a></li>
<li><a href="#"><em>测试测试</em></a></li>
<li><a href="#"><em>测试,X</em></a></li>
<li><a href="#"><em>测试XXx</em></a></li>
<li><a href="#" class="cur"><em>测试测</em></a></li>
<li><a href="#"><em>测试测试测试</em></a></li>
</ul>
</div>
|