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是为了让父元素露出按钮左侧部分不致于被子元素的背景覆盖。

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

缺点：

1. 由于使用子元素的背景图覆盖父元素的，所以不能使用背景透明的图片来实现，否则按钮右侧圆角部分会使得父元素的背景图片露出，大街网使用的是白色背景，因此该按钮如果在非白色背景的场景使用会有白边：

   

2. 如果有多个不同高度的按钮，就要制作多张图片，或者使用图片拼接拼成一张，不便维护和拓展；
3. 引进无语义化的html标签；

探索 - 大街网2   

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

效果图：

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

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

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

缺点：

1. 对实现者的图片拼接技术要求更高；
2. 依然是图片拼接技术的缺点：后期维护拓展不便；
3. 引进无语义化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%啊，直接拉一个从白色到透明的渐变啊等等，可以更灵活地实现多种玻璃透明效果。

优点：

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

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

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

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

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