/* 336x280*/
圆角按钮的实现看似并不困难，但会遇到如按钮宽度自适应文字长度等情况，不可能每次都切固定大小的背景图片。
自适应宽度的按钮，通常会采用类似下面的切图方法：
这样一来，只需要嵌套两层标签即可：
<a href="#"><span>按钮</span></a>
a 标签设定右侧块的圆角背景，span 标签设定左侧块的圆角背景以及内容区块，目前支付宝是这样做的。但前提需要保证按钮文案长度不会超过背景图片的宽度。
另一种切图的方案是分三块切，左侧一块，右侧一块，中间内容区域一块。
这样切图，事实上 a 标签也只需要嵌套两层即可实现自适应的圆角按钮。
<a href="#"><span><span>按钮</span></span></a>
a 标签设定右侧块的圆角背景，第一层 span 标签设定左侧块的圆角背景，第二层标签设定内容区域的水平平铺背景。但这种两层的方式在 button 标签上并不适用，需要通过一些乱七八糟的 hack 来干掉 button 标签各种表现上的缺陷。考虑到 a 标签按钮和 button 标签按钮的通用性，小小牺牲一下，套了三层标签。
具体请查看演示：round_corner_button.html
/* 336x280*/
版权所有，转载请注明出处。
转载自 <a href="http://www.mangguo.org/multi-element-round-corner-button/" title="多层元素嵌套的圆角按钮" rel="bookmark">多层元素嵌套的圆角按钮 | 芒果小站</a>
已经有 10 条群众意见
- SOHO一族
#1/2010-09-15 11:33很好的设计思路，顶博主。 回应
- 我爱配搭
#2/2010-09-15 11:38相当实用，收藏！ 回应
- 德意
#3/2010-09-15 21:01这个很多 cool，就可以不用背景图片了。 回应
- 书香阁
#4/2010-09-15 23:21收藏了，以后改改看。 回应
- 就下载
#5/2010-09-16 10:44很不错，谢谢。 回应
- 苹果iPhone价格
#6/2010-09-16 10:59不错不错！
不知道博主的风格是否能共享呢？简介大方。。。喜欢啊。 回应
- 卢松松
#7/2010-09-16 15:54这个小功能不错。 回应
- yesureadmin
#8/2010-09-16 19:35思路挺好的呀。 回应
- 学夫子
#9/2010-09-17 11:38我的博客在非 IE 下就是圆角，ie 下就不是圆角，看起来很不舒服。 回应
- IM路人
#10/2010-09-21 17:38这个收藏，以后可能会用到。 回应
我简单说几句