Css实现多层元素嵌套的圆角按钮_html-js-css

概述圆角按钮的实现看似并不困难，但会遇到如按钮宽度自适应文字长度等情况，不可能每次都切固定大小的背景图片。自适应宽度的按钮，通常会采用类似下面的切图方法：这样一来，只需要嵌套两层标签即可： <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 标签按钮的通用性，小小牺牲一下，套了三层标签。

<!DOCTYPE HTML><HTML><head><Meta charset="gbk" /><Title>多层元素嵌套的圆角按钮 - </Title><style>HTML{color:#000;background:#fff}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fIEldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fIEldset,img{border:0}address,caption,cite,dfn,em,strong,var{Font-style:normal;Font-weight:normal}li{List-style:none}caption,th{text-align:left}h1,h6{Font-size:100%;Font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;Font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,select{Font-family:inherit;Font-size:inherit;Font-weight:inherit}input,select{*Font-size:100%}legend{color:#000}body{Font:12px/1.5 '9ed14f53',arial;padding:2em}h1{Font-size:18px}h2{Font-size:16px;color:green;padding:1em0}ol{margin:10px0 10px 2em}olli{List-style:decimal;line-height:1.8}th,td{border:1pxsolID #ddd;padding:2px5px;Font-size:12px}th{Font-weight:bold;background:#eee}.clearfix:after{content:'20';display:block;height:0;clear:both}.clearfix{zoom:1}a,button{Font-family:arial;margin-right:5px;}/* button common */.btn{display:inline-block;text-align:center;Font-size:14px;vertical-align:mIDdle;/* button */border:none;background:transparent;cursor:pointer;white-space:@R_301_5560@;overflow:visible;}.btn,.btn:visited{color:#fff;text-decoration:none;}.btn b{background:url(/uploads/allimg/1009/round_corner_button.png) no-repeat 100% -70px;display:inline-block;padding-right:5px;}.btn b b{background-position:0 0;padding:0;padding-left:5px;}.btn b b b{background-repeat:repeat-x;background-position:0 -35px;padding:0 5px;height:35px;line-height:35px;}.btn:hover{text-decoration:none;zoom:1;}.btn:hover b b{background-repeat:repeat-x;}.btn:hover b b b{background-repeat:repeat-x;}/* large orange */.btn-a b{background-position:100% -70px;}.btn-a b b b{background-position:0 -35px;}.btn-a:hover b{background-position:100% -175px;}.btn-a:hover b b{background-position:0 -105px;}.btn-a:hover b b b{background-position:0 -140px;}/* large blue */.btn-b b{background-position:100% -280px;}.btn-b b b{background-position:0 -210px;}.btn-b b b b{background-position:0 -245px;}.btn-b:hover b{background-position:100% -385px;}.btn-b:hover b b{background-position:0 -315px;}.btn-b:hover b b b{background-position:0 -350px;}</style><body><h1>多层元素嵌套的圆角按钮</h1><h2>三层元素嵌套的圆角按钮</h2><a href="#" class="btn btn-a"><b><b><b>a标签</b></b></b></a><button class="btn btn-a"><b><b><b>button标签</b></b></b></button><a href="#" class="btn btn-b"><b><b><b>a标签</b></b></b></a><button class="btn btn-b"><b><b><b>button标签</b></b></b></button></body></HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

总结

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

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

欢迎分享，转载请注明来源：内存溢出

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

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

发表评论

评论列表（0条）