利用滑動門原理製作圓角和漸變色按鈕【css】
在說明方法之前，先看一下效果圖：
在border-radius出現之前，實現圓角效果使用的是滑動門。滑動門是利用背景影象的可層疊性，並允許他們在彼此之上進行滑動，以創造一些特殊的效果。
要想讓滑動門適用於多種場合，左右兩個角必須透明，以此露出背景顏色，若是左右壓中間，左右角的透明部分露出的是中間的顏色，所以只能改成中間壓左右，中間部分可以重疊，已達到寬度自適應的效果。
切圖技巧，可以將按鈕的背景圖分為三個部分，一個部分是左邊帶有圓角的部分，一個部分是中間的，最後一個部分是右邊帶有圓角的部分，然後將三個部分的圖拼接成雪碧圖，這樣可以直接通過定位實現圖片的選擇。注意：因為要將三個圖拼成一張圖，所以除了高度一致外，最好寬度也是一樣的，效果圖如下：
接下來講解程式碼的實現部分：
為了方便，所以直接將css樣式放在了html檔案中，平時在寫程式碼的過程中最好能有外聯樣式表，這樣修改和看程式碼比較容易。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用滑動門製作漸變按鈕</title> <style> body,ul,p,h1,h2,h3,h4,dl,dd,form,input,textarea,select { padding:0; margin:0; font-family:arial; } li { list-style:none; } img { border:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } .box{ margin:100px auto; width: 100%; background-color: #970e02; } #nav{ width:960px; height: 36px; margin:0 auto; padding-top:8px; } #nav li{ float: left; height: 28px; margin-left:2px; } #nav a{ float: left; height: 28px; text-decoration: none; line-height: 28px; font-size: 15px; font-family:Arial; color:#fff; text-align: center; } #nav strong{ float: left; height: 28px; font-weight: normal; } #nav span{ float: left; height: 28px; padding:0 16px; } #nav a:hover,#nav .active a{ background:url("../images/nav_active_bg.png") repeat-x 0 -56px; } #nav strong:hover,#nav .active strong{ background: url("../images/nav_active_bg.png") no-repeat; } #nav span:hover,#nav .active span{ background: url("../images/nav_active_bg.png") no-repeat right -28px; } </style> </head> <body> <div class="box"> <ul id="nav"> <li class="active"><a href="#"><strong><span>HOME</span></strong></a></li> <li><a href="#"><strong><span>LATEST ARRIVALS</span></strong></a></li> <li><a href="#"><strong><span>MEN'S</span></strong></a></li> <li><a href="#"><strong><span>WOMEN'S</span></strong></a></li> <li><a href="#"><strong><span>KIDS</span></strong></a></li> <li><a href="#"><strong><span>BRANDS</span></strong></a></li> <li><a href="#"><strong><span>SALE</span></strong></a></li> <li><a href="#"><strong><span>GIFT CARDS</span></strong></a></li> <li><a href="#"><strong><span>FREEBIES</span></strong></a></li> </ul> </div> </body> </html>
本案例中用滑動門實現圓角和漸變色的按鈕的原理是：將標籤a包圍標籤strong和span，因為層級的關係，a的層級是在最下面，那麼當strong和span的層級可以覆蓋a標籤，所以就是將a標籤的背景圖片置為按鈕中間可以重疊的部分，然後沿著x軸進行重複，strong標籤的背景圖片置為左邊圓角的部分，span標籤的背景圖片置為右邊圓角的部分，這樣就可以左右圓角覆蓋中間的部分，實現按鈕的基本樣式。這個過程中還有最重要的一點是，需要將a
strong span的float都寫成left，這樣才不會出現中間有縫隙。
如果span中的內容越長，那麼內容就會撐開按鈕的寬度，自讓而然的就讓按鈕自適應了。除此之外，我設定了滑鼠經過事件和啟用事件，即當滑鼠經過按鈕的時候，按鈕就會出現如圖所示的效果。
另外需要說的一點是，如何定位雪碧圖的位置。background的定位其實是position，這個定位的方法有兩種，一種是具體的數值，一種是直接用位置的英文拼寫，在之前的文章中也寫到了這個屬性的使用方法，詳情請看HTML5基礎之程式碼入門。position的定位是通過x和y軸的位置進行定位的。如下所示，
x: left center right y: top center bottom 或者 x: ##px y: ##px