Css实现多层元素嵌套的圆角按钮
发布时间：2018-10-15 14:12:40 所属栏目：经验 来源：站长网
导读：圆角按钮的实现看似并不困难，但会遇到如按钮宽度自适应文字长度等情况，不可能每次都切固定大小的背景图片。 自适应宽度的按钮，通常会采用类似下面的切图方法： 这样一来，只需要嵌套两层标签即可： a href=#span按钮/span/a a 标签设定右侧块的圆角背景
|
圆角按钮的实现看似并不困难，但会遇到如按钮宽度自适应文字长度等情况，不可能每次都切固定大小的背景图片。 自适应宽度的按钮，通常会采用类似下面的切图方法：
这样一来，只需要嵌套两层标签即可： a 标签设定右侧块的圆角背景，span 标签设定左侧块的圆角背景以及内容区块，目前支付宝是这样做的。但前提需要保证按钮文案长度不会超过背景图片的宽度。 另一种切图的方案是分三块切，左侧一块，右侧一块，中间内容区域一块。
这样切图，事实上 a 标签也只需要嵌套两层即可实现自适应的圆角按钮。 a 标签设定右侧块的圆角背景，第一层 span 标签设定左侧块的圆角背景，第二层标签设定内容区域的水平平铺背景。但这种两层的方式在 button 标签上并不适用，需要通过一些乱七八糟的 hack 来干掉 button 标签各种表现上的缺陷。考虑到 a 标签按钮和 button 标签按钮的通用性，小小牺牲一下，套了三层标签。
（编辑：威海站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
