软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > Css实现多层元素嵌套的圆角按钮

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

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

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

 

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

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

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

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

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

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

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


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

    相关阅读
    网友评论
    栏目导航
    推荐软件