Css实现多层元素嵌套的圆角按钮
栏目：htmlcss时间：2014-03-30 02:46:18
圆角按钮的实现看似并不困难，但会遇到如按钮宽度自适应文字长度等情况，不可能每次都切固定大小的背景图片。
自适应宽度的按钮，通常会采用类似下面的切图方法：
这样一来，只需要嵌套两层标签即可：
<a href="#"><span>按钮</span></a>
a 标签设定右侧块的圆角背景，span 标签设定左侧块的圆角背景以及内容区块，目前支付宝是这样做的。但前提需要保证按钮文案长度不会超过背景图片的宽度。
另一种切图的方案是分三块切，左侧一块，右侧一块，中间内容区域一块。
这样切图，事实上 a 标签也只需要嵌套两层即可实现自适应的圆角按钮。
<a href="#"><span><span>按钮</span></span></a>
a 标签设定右侧块的圆角背景，第一层 span 标签设定左侧块的圆角背景，第二层标签设定内容区域的水平平铺背景。但这种两层的方式在 button 标签上并不适用，需要通过一些乱七八糟的 hack 来干掉 button 标签各种表现上的缺陷。考虑到 a 标签按钮和 button 标签按钮的通用性，小小牺牲一下，套了三层标签。
提示：可修改后代码再运行!
------分隔线----------------------------
------分隔线----------------------------