实现自适应宽度圆角按钮的方法

html代码的结构

其实说起来也不难，首先做一个足够长度的图片，然后通过设置背景图片，让父元素显示按钮的左部，子元素显示按钮的右部，这样就可以随着不同的宽度显示完整的按钮。关键代码：

a.reg-btn, a.reg-btn span {
    background: url("/images/regist/bg-reg-btn.gif") no-repeat;
}
a.reg-btn{
    padding-left:3px;
    background-position: 0 -100px;
}
a.reg-btn span{
    background-position: right -100px;
    width:144px;
    display:block;
}

让子元素的背景图片右对齐，这样就可以覆盖父元素的背景，而padding-left是为了让父元素露出按钮左侧部分不致于被子元素的背景覆盖。

优点：自适应宽度变化；各浏览器显示效果一致；

缺点：

1. 由于使用子元素的背景图覆盖父元素的，所以不能使用背景透明的图片来实现，否则按钮右侧圆角部分会使得父元素的背景图片露出，大街网使用的是白色背景，因此该按钮如果在非白色背景的场景使用会有白边：

   

2. 如果有多个不同高度的按钮，就要制作多张图片，或者使用图片拼接拼成一张，不便维护和拓展；
3. 引进无语义化的html标签；

转载于:https://www.cnblogs.com/onflying/archive/2013/06/08/3126984.html