在说明方法之前，先看一下效果图：
在border-radius出现之前，实现圆角效果使用的是滑动门。滑动门是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。
要想让滑动门适用于多种场合，左右两个角必须透明，以此露出背景颜色，若是左右压中间，左右角的透明部分露出的是中间的颜色，所以只能改成中间压左右，中间部分可以重叠，已达到宽度自适应的效果。
切图技巧，可以将按钮的背景图分为三个部分，一个部分是左边带有圆角的部分，一个部分是中间的，最后一个部分是右边带有圆角的部分，然后将三个部分的图拼接成雪碧图，这样可以直接通过定位实现图片的选择。注意：因为要将三个图拼成一张图，所以除了高度一致外，最好宽度也是一样的，效果图如下：
接下来讲解代码的实现部分：
<!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> 为了方便，所以直接将css样式放在了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
