CSS:圆角按钮的制作

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

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

会使用以下3种方法去制作这个按钮:

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

一、直接使用input


51048da7gd38aadd11e8a&690.png

CSS:圆角按钮的制作

<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>

51048da7gd38aafa24aba&690.png

<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></a>


51048da7gd38aafa24aba&690.png

<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,主要根据实际情况来选择表现方法吧

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND