CSS：浅谈自适应宽度圆角按钮实现

前言最近在做一个个人项目时，需要实现一个圆角按钮。刚开始觉得很简单，用一张图片就能完成了，再加上图片拼接技术的话还能实现鼠标停留样式变化。但后来想想，出于网站整体风格统一的考虑，该按钮样式会在多处用到，很多时候只有两个字，但有时是多个字的，如果再碰上英文单词的，岂不是要针对不同的宽度设计不同的图片？当然可以做一张足够宽度的图片，然后所有按钮都使用同一张图片、同个宽度，但这样真的很不美观。不行，看来要探索自适应宽度圆角按钮的实现了。

探索 - 大街网

网址：http://www.dajie.com/

效果图：原图以及修改按钮宽度的图片：

实现方法：其实通过查看使用的图片

以及html代码的结构

都可以猜想出它的实现方法了。其实说起来也不难，首先做一个足够长度的图片，然后通过设置背景图片，让父元素显示按钮的左部，子元素显示按钮的右部，这样就可以随着不同的宽度显示完整的按钮。关键代码：

a.reg-btn, a.reg-btn span {
    background: url("/images/regist/bg-reg-btn.gif") no-repeat;
}
a.reg-btn{
    padding-left:3px;
    background-position: 0 -100px;
}
a.reg-btn span{
    background-position: right -100px;
    width:144px;
    display:block;
}

让子元素的背景图片右对齐，这样就可以覆盖父元素的背景，而padding-left是为了让父元素露出按钮左侧部分不致于被子元素的背景覆盖。

优点：自适应宽度变化；各浏览器显示效果一致；

缺点：

由于使用子元素的背景图覆盖父元素的，所以不能使用背景透明的图片来实现，否则按钮右侧圆角部分会使得父元素的背景图片露出，大街网使用的是白色背景，因此该按钮如果在非白色背景的场景使用会有白边：
如果有多个不同高度的按钮，就要制作多张图片，或者使用图片拼接拼成一张，不便维护和拓展；
引进无语义化的html标签；

探索 - 大街网2

网址：http://job.dajie.com/resume/index

效果图：

实现方法：大街网里面实现自适应宽度按钮的第二种做法，修补了上面的背景白边问题。其实就是改变了背景图片：

并且对background-position进行重新调整来实现，原理相同。

优点：自适应宽度；各浏览器显示一致；能够适应不同的应用场景（背景不同）

缺点：

对实现者的图片拼接技术要求更高；
依然是图片拼接技术的缺点：后期维护拓展不便；
引进无语义化html标签；

探索 - Tugboat Coffee

网址：http://handcraftedcss.com/tugboat/

效果图：原网页效果如下，我修改后的效果见本文开头：

实现方法：利用CSS背景属性可以同时设置颜色和图片的特点。首先准备一张上半部分透明度10%的白色，下半部分完全透明的图片：

接着设置好按钮的宽度高度以及背景颜色，接着设置背景图片为上面的图片以及background-position:0 50%，此时上面的图片就会垂直居中显示，从而显示出上面部分比下面部分颜色浅的玻璃效果，最后再通过设置 border-radius 属性即可实现圆角。代码如下：

div.more-btn a {
    padding: 6px 14px;
    color: white;
    background: #3792B3 url(http://simplebits.com/img/glass-btn.png) repeat-x 0 50%;
    border-radius: 14px;
    -webkit-border-radius: 14px;
}

注：背景图片高度可以尽量大，这样就可以适应不同高度按钮的需求，由于 background-position 里面使用的是是百分比定位，所以不管按钮高度多少背景图都会始终垂直居中；不一定非要像上面一样制作背景图片，可以把上半部分透明度设为20%啊，直接拉一个从白色到透明的渐变啊等等，可以更灵活地实现多种玻璃透明效果。

优点：

自适应宽度和高度；
当我们想修改按钮的背景色和鼠标停留颜色的时候，只需一行代码修改 background-color 属性即可完成；
圆角效果可以方便地定制：设置 border-radius 即可，不涉及到具体图片的改变；
html结构代码简洁，可以适应各种不同标签；

缺点：各浏览器的显示效果不统一，其实就是指IE：

参考书籍：《无懈可击的Web设计2：CSS深入应用》P39

总结上面提供了来自两个优秀网站的两种实现自适应宽度按钮的方法，肯定还有其他的实现方法，但未必有上面两种方法那么优雅。该使用哪一种方法呢？第一种方法由于使用图片来实现，灵活性不如第二种方法，但各浏览器显示统一。所以，

如果需要保证各浏览器显示效果统一，用第一种方法，如果觉得第二种方法在IE下的效果可以接受，那推荐第二种方法；
如果网站有多处使用到相似风格的按钮，而这些按钮彼此间宽度、高度不同、颜色多样，此时考虑使用第二种方法，因为此时使用第一种方法的话就要根据高度、颜色设计N多组图片来应付了。