CSS：圆角按钮的制作

 

 

 

CSS：圆角按钮的制作

(2013-01-18 10:52:56)

转载▼

标签： css 圆角按钮 css按钮 按钮宽度自适应

分类： div css

我们都知道现在CSS3的属性border-radius很方便的就可以制作出圆角按钮的效果，但是就目前浏览器的市场占有率来讲，直接使用CSS3的效 果还是不理想的，因为目前Opera10、IE6-8都是不支持CSS3的圆角属性，所以，在这里总结下我平时工作中时使用的方法。

一般来说，当我们纵观整个页面，如果不需要共用按钮的背景，我们可以直接连带着文字整个切下来，但是有时候页面中许多按钮的背景是一样的，高度一致，只是按钮上的文字不一样，这个时候，一般我会使用以下3种方法去制作这个按钮:

在这里拿这个按钮作为例子

一、直接使用input

 

<input type="button" class="applyBtn" value="申请职位"/>

 

input{

      width:138px;

      height:40px; 

      padding-bottom:2px;

      *padding：0; 

      font:17px/40px "微软雅黑"; 

      color:#fff;

      background:url(http://pic2.58.com/ui7/job/hire/hireinfo.gif) 0 -77px no-repeat; 

      cursor:pointer

}

这里width和高度是一定要的，如果input宽度用padding代替的话，firefox和谷歌、IE会有1px的差别，IE6/IE7下使用padding，宽度会明显大于其他的浏览器下的按钮，所以宽度最好是定义的；

就文字的高度位置而言， firefox识别不了line-height，所以位置会下移，这里的padding-bottom是针对firefox的，谷歌和IE7-IE9不识别此属性，但是IE6收到了影响，所以可以利用css hack来解决。

 

当这一类按钮的宽一致时，这样使用是没有问题的，如果只是背景色相同，宽度不同，想要 单切背景且重复利用，这种方法就不能达到背景共用的要求

 

二、使用<label><input></input></label>

 

<label>

<input value="保存" type="button">

</label>

 

label{

     display:inline-block;

     padding-left:2px;

     background:url(http://pic2.58.com/ui7/job/hire/hire_sp_btn.gif) no-repeat  0 -171px; 

}

input{

      width:84px;

      height:35px; 

      padding:0 2px 4px 0;

      *padding-bottom:0;

      background:url(http://pic2.58.com/ui7/job/hire/hire_sp_btn.gif) no-repeat right -171px;           font:16px/35px "微软雅黑"; 

      color:#fff; 

      cursor:pointer;

}

label要变为行内块元素，或者直接设为块元素+固定宽度，效果是一样的，padding-left是用来放置左边的圆角的；

input里的宽高和上面直接用input来设置时需要注意的事项一致，需要说明的是为了使文字居中，要给padding-right值。

 

三、使用<a><span></span></a>

 

<a><span>保存</span></a>

 

a{ 

     display:inline-block;

     padding-left:2px;

     background:url(http://pic2.58.com/ui7/job/hire/hire_sp_btn.gif) no-repeat  0 -171px;

}

span{ 

    display:inline-block;

    padding:0 42px 0 40px;

    background:url(http://pic2.58.com/ui7/job/hire/hire_sp_btn.gif) no-repeat right -171px;

    font:16px/35px "微软雅黑"; 

    color:#fff

}

使用这个结构，可以发现，不必要再设置span的宽度，直接用padding值来表示，可以达到按钮宽度根据内容自适应，并且个浏览器表现是一致的；

高度上也不用写hack了，直接设置line-height就可以了，连height也可以省略掉。

 

当然还有很多种写法，可以使用别的标签，也可以使用别的结构，比如分为三个部分，左右圆角各位一个dom，中间部分是一个dom，主要根据实际情况来选择表现方法吧