简单实现圆角不固定长度的button样式
最近做的项目里面有好多好多的button,而且按钮样式也有很多样式的,光是直角不管你是渐变还是什么特殊效果,都很好搞定,
她偏偏都是些圆角的家伙,很是伤脑筋,做成固定图片吧,有相似的button按钮的长短不一,就要n多相似图片。
网上找了找倒是看到一个老外写的公用的样式,光样式表就写了10几k的css文件。
我自己临时写了个样式。
html
css代码:
.Btu{
background:url(../../image/default/dengluBut01.gif) no-repeat;
background-position:right -108px;
font-size:14px;
padding:0px 0px;
*padding:0px 0px;
_padding:0px;
height:100%;
overflow:hidden;
padding-right:5px;
display:inline-block; }
.Btu.BtuInput{
background:url(../../image/default/dengluBut01.gif) no-repeat;
background-position:0px -72px;
height:26px;
border:0px;
font-size:14px;
padding:0 5px 0 10px;
line-height:26px;
color:#FFF;
cursor:pointer; }很简单的button圆角样式,我测试 IE6,IE7,IE8,FF都通过
大家帮我想想主意,还有什么妙招。这个原理太简单了就不说了。
缺点:
不能做到鼠标放上去变样子,想要变就要借助js了
转载请注明文章转载自:网站前端,web前端,前端脚本,前端优化|时代前端 [http://www.52shidai.com]
本文链接地址:简单实现圆角不固定长度的button样式