您当前位置：首页 > web前端 > htmlcss > Css实现多层元素嵌套的圆角按钮

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

来源：程序员人生发布时间：2014-03-30 02:46:18 阅读次数：4137次

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

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

这样一来，只需要嵌套两层标签即可：

<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>多层元素嵌套的圆角按钮 - Liehuo.Net</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,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,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,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,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:nowrap;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>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 文章的长短之对SEO的影响分析

下一篇 Access入门教程 3.6 为数据库指定标题

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点