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

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

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

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

自適應寬度的按鈕，通常會采用類似下面的切圖方法：

這樣一來，只需要嵌套兩層標簽即可：

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

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

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

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

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

a 標簽設定右側塊的圓角背景，第一層 span 標簽設定左側塊的圓角背景，第二層標簽設定內(nèi)容區(qū)域的水平平鋪背景。但這種兩層的方式在 button 標簽上并不適用，需要通過一些亂七八糟的 hack 來干掉 button 標簽各種表現(xiàn)上的缺陷。考慮到 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刷新本頁，更多網(wǎng)頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

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

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

上一篇 文章的長短之對SEO的影響分析

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

分享到:

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

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

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