Css实现多层元素嵌套的圆角按钮

Css实现多层元素嵌套的圆角按钮,第1张

概述圆角按钮的实现看似并不困难,但会遇到如按钮宽度自适应文字长度等情况,不可能每次都切固定大小的背景图片。 自适应宽度的按钮,通常会采用类似下面的切图方法: 这样一来,只需要嵌套两层标签即可: <a href="#"><span>按钮</span></a>a 标签设定右…

圆角按钮的实现看似并不困难,但会遇到如按钮宽度自适应文字长度等情况,不可能每次都切固定大小的背景图片。

自适应宽度的按钮,通常会采用类似下面的切图方法:

 

这样一来,只需要嵌套两层标签即可:

<a href="#"><span>按钮</span></a>

a 标签设定右侧块的圆角背景,span 标签设定左侧块的圆角背景以及内容区块,目前支付宝是这样做的。但前提需要保证按钮文案长度不会超过背景图片的宽度。

另一种切图的方案是分三块切,左侧一块,右侧一块,中间内容区域一块。

这样切图,事实上 a 标签也只需要嵌套两层即可实现自适应的圆角按钮。

<a href="#"><span><span>按钮</span></span></a>

a 标签设定右侧块的圆角背景,第一层 span 标签设定左侧块的圆角背景,第二层标签设定内容区域的水平平铺背景。但这种两层的方式在 button 标签上并不适用,需要通过一些乱七八糟的 Hack 来干掉 button 标签各种表现上的缺陷。考虑到 a 标签按钮和 button 标签按钮的通用性,小小牺牲一下,套了三层标签。


提示:可修改后代码再运行!

总结

以上是内存溢出为你收集整理的Css实现多层元素嵌套的圆角按钮全部内容,希望文章能够帮你解决Css实现多层元素嵌套的圆角按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1026103.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存