您當(dāng)前位置：首頁 > web前端 > htmlcss > Css實(shí)現(xiàn)多層元素嵌套的圓角按鈕

Css實(shí)現(xiàn)多層元素嵌套的圓角按鈕

來源：程序員人生發(fā)布時(shí)間：2014-03-30 02:46:18 閱讀次數(shù)：4356次

圓角按鈕的實(shí)現(xiàn)看似并不困難，但會(huì)遇到如按鈕寬度自適應(yīng)文字長度等情況，不可能每次都切固定大小的背景圖片。

自適應(yīng)寬度的按鈕，通常會(huì)采用類似下面的切圖方法：

這樣一來，只需要嵌套兩層標(biāo)簽即可：

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

a 標(biāo)簽設(shè)定右側(cè)塊的圓角背景，span 標(biāo)簽設(shè)定左側(cè)塊的圓角背景以及內(nèi)容區(qū)塊，目前支付寶是這樣做的。但前提需要保證按鈕文案長度不會(huì)超過背景圖片的寬度。

另一種切圖的方案是分三塊切，左側(cè)一塊，右側(cè)一塊，中間內(nèi)容區(qū)域一塊。

這樣切圖，事實(shí)上 a 標(biāo)簽也只需要嵌套兩層即可實(shí)現(xiàn)自適應(yīng)的圓角按鈕。

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

a 標(biāo)簽設(shè)定右側(cè)塊的圓角背景，第一層 span 標(biāo)簽設(shè)定左側(cè)塊的圓角背景，第二層標(biāo)簽設(shè)定內(nèi)容區(qū)域的水平平鋪背景。但這種兩層的方式在 button 標(biāo)簽上并不適用，需要通過一些亂七八糟的 hack 來干掉 button 標(biāo)簽各種表現(xiàn)上的缺陷。考慮到 a 標(biāo)簽按鈕和 button 標(biāo)簽按鈕的通用性，小小犧牲一下，套了三層標(biāo)簽。

<!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標(biāo)簽</b></b></b></a><button class="btn btn-a"><b><b><b>button標(biāo)簽</b></b></b></button><a href="#" class="btn btn-b"><b><b><b>a標(biāo)簽</b></b></b></a><button class="btn btn-b"><b><b><b>button標(biāo)簽</b></b></b></button></body></html><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁，更多網(wǎng)頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運(yùn)行!

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 文章的長短之對(duì)SEO的影響分析

下一篇 Access入門教程 3.6 為數(shù)據(jù)庫指定標(biāo)題

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

Css實(shí)現(xiàn)多層元素嵌套的圓角按鈕