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,做到浏览器一致的效果。