浏览器的按钮(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,做到浏览器一致的效果。
分享到:
相关推荐
使用CSS3制作漂亮的圆角按钮是一款纯CSS3实现的圆形修变按钮特效。
圆角按钮宽度自适应 自适应宽度的CSS圆角背景的按钮
div+css 可伸缩的圆角 div+css 可伸缩的圆角 div+css 可伸缩的圆角 div+css 可伸缩的圆角 div+css 可伸缩的圆角
HTML5 CSS3制作的带图标的不规则按钮,这些不规则的形状其实是有规则的,像圆角、椭圆、梯形等,只不过是印象中比矩形的按钮稍微些,但是这些按钮应用在网页上,感觉很有个性哦,让人眼前一亮的感觉,按钮是带有图标...
CSS将图片自动变为圆角.rarCSS将图片自动变为圆角.rarCSS将图片自动变为圆角.rarCSS将图片自动变为圆角.rarCSS将图片自动变为圆角.rarCSS将图片自动变为圆角.rar
CSS3不同背景颜色的圆角按钮 CSS3不同背景颜色的圆角按钮
目前CSS3的应用已经越来越普及了,它最常见的一个圆角功能非常的不错,可以省略掉不少图片从而直接用代码实现按钮的渐变、描边、阴影等效果,本实例就是一款直接用CSS3实现的,无需其他任何JS或者flash、亦不需任何...
CSS3漂亮的圆角自适应长度按钮特效,按钮可跟随文字数量的多少自动适应宽度。
css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角
css+div漂亮的圆角tab选项卡css+div漂亮的圆角tab选项卡css+div漂亮的圆角tab选项卡
一款简洁美观纯CSS3实现的水平手风琴分享按钮菜单代码,每一个分享按钮展开时会有该平台的文字描述,切换效果相当绚丽。
CSS制作 (亮灯)开关 按钮.zip
css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角
CSS自适应宽度圆角按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head> <meta ...
漂亮,简单的圆角按钮 纯css input a
div css圆角代码各种圆角表格_圆角边框css圆角
css圆角边框css圆角边框css圆角边框css圆角边框css圆角边框
这是一组共78个使用纯CSS3制作的方形圆角立体质感按钮。这些按钮都带有3D立体质感,按钮上的图标使用Zocial字体图标制作。这些按钮都带有鼠标滑过样式和鼠标点击样式,可以直接使用。