首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS打造水平自动伸缩的圆角按钮

2012-11-03 
CSS制作水平自动伸缩的圆角按钮浏览器的按钮(button,input)大多用系统主题的样式(safari与opera有自已的样

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

热点排行