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

发布时间：2018-10-13 12:10:36 所属栏目：创业来源：站长网

导读：圆角按钮的实现看似并不坚苦，但会碰着如按钮宽度自顺应笔墨长度等环境，不行能每次都切牢靠巨细的配景图片。自顺应宽度的按钮，凡是会回收相同下面的切图要领：这样一来，只必要嵌套两层标签即可： a href=#span按钮/span/a a 标签设定右侧块的圆角配景

圆角按钮的实现看似并不坚苦，但会碰着如按钮宽度自顺应笔墨长度等环境，不行能每次都切牢靠巨细的配景图片。

自顺应宽度的按钮，凡是会回收相同下面的切图要领：

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

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

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

a 标签设定右侧块的圆角配景，span 标签设定左侧块的圆角配景以及内容区块，今朝付出宝是这样做的。但条件必要担保按钮文案长度不会高出配景图片的宽度。

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

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

这样切图，究竟上 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:1em 0}ol{margin:10px 0 10px 2em}ol li{list-style:decimal;line-height:1.8}th,td{border:1px solid #ddd;padding:2px 5px;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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如