用css样式定义圆角背景图片按钮根据文字自适应宽度的方法

CSS样式：

.setBottom a,.setBottom span,.popTishi .popIcon{background:url(../images/button.png) no-repeat;}

.setBottom{height:30px;position: relative;line-height:30px;}
.setBottom span{ position:absolute;height:30px;width:3px; display:inline-block;top:0; cursor:pointer;}
.setBottom span.spanLeft{left:-3px;}
.setBottom span.spanRight{right:-3px;}
.setBottom a{padding:0 20px; display:inline-block;}

.btnBlue a{ background-position:center -180px}
.btnBlue span.spanLeft{background-position:left -180px;}
.btnBlue span.spanRight{ background-position:right -180px;}
.btnBlue a:hover{background-position:center -150px;}
.btnBlue a:hover .spanLeft{background-position:left -150px;}
.btnBlue a:hover .spanRight{background-position:right -150px;}
.btnBlue a,.btnBlue a:visited{color:#fff;}
.btnBlue a:hover{color:#005383;}

html用法：

<div class="setBottom btnBlue fl">
<a href="#">
<span class="spanLeft"></span>
<span class="spanRight"></span>
搜索
</a>
</div>

样式中图片如下图所示：