CSS制作水平自动伸缩的圆角按钮

浏览器的按钮(button,input)大多用系统主题的样式(safari与opera有自已的样式)，制作网页时，想让所有浏览器的按钮都有一致的效果，就必需自已去定义样式。

　　因为按钮想做成圆角的，貌似圆角的比方角的好看。IE不支持CSS3(什么时候CSS3被广泛支持了，web设计师的工作会轻松很多)，只能用图片来做。以前我做的是按照按钮字数多少来做很多个按钮背景。现在要实现按扭圆角随着字数的多少而自动伸缩。

　　首先要在PS里做出圆角按钮的背景，我这里做了最宽支持300像素的按钮(相信没有人在web上用一个300像素宽，甚至更宽的按钮吧)，如下图所示：



　　这个按钮的背景是圆角10像素的，注意上图下部分右边那个半圆角处外的背景是白的(该图片只支持白背景的，可以保存下来在用PS看到)，这是为了遮住方角。

　　接着建立html文件，在其头部标签中加上一句代码，让IE8使用IE7的模式(IE8还火狐还有很多不同)：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

　　下面是html代码：

<span class="btn_container"><input type="submit" class="btn" name="btn_submit" value="提交按钮一" /></span>

　　给input按钮外面套一个标签，用来装载背景图中上面的部分，即形成左边圆角，而里面input装载背景图中下面的部分，即形成右边圆角，CSS代码如下：

.btn::-moz-focus-inner { border: 0; padding: 0; }  /*重置火狐中input里的内外边距*/
.btn_container { font-size: 12px '宋体'; background: url(btn_bg.gif) no-repeat; display: inline-block; *display: inline; }  /*标准浏览器下btn_container必需为块级，所以用display: inline-block;*/
.btn_container input { height: 20px; padding: 0 10px; *padding: 0 5px; *line-height: 23px; border: none; background: url(btn_bg.gif) right -35px no-repeat; cursor: pointer;  } /*IE下按钮默认的内间距还会随着字数增多而变多*/
.btn_container * { margin: 0; } /*重置谷歌,safari中btn_container里所有元素的外间距,因为有个元素影响了input右边的外间距*/

　　这里使用了IE的CSS的hack，做到浏览器一致的效果。