Question

怎样input button 按钮添加圆角背景？

现在我已经做好了一张圆角背景图input{      border:none;      width:84px;      height:35px;       padding:0 2px 4px 0;      *padding-bottom:0;      background:url(../bg1.png) no-repeat 0 0px;font:16px/35px "微软雅黑";       color:#fff;       cursor:pointer;}
这样写不行 怎么能让图片适应input的宽度呢  就是字数变化后 背景自动适应input标签的宽度

Answer 1

1. 如果浏览器支持的话, 直接一个 radius 样式就可以了；
   

2. border-radius:4px;
   

3. -webkit-border-radius: 4px；

4. 新建一个html文件，在html内写新建一个button标签：

5. <input type="button" name="button" value="设置圆角" class="btn">；同时给button先加上样式：

6. btn{width: 200px;height: 30px;background: #ccc;border: 1px solid #eee;}；

7. 预览html文件，可以看到现在button按钮暂时还没有圆角；

   

8. css样式设置圆角有专门的样式（border-radius），因此button按钮设置圆角可以加上：border-radius: 15px;

   

9. 特别注意，border-radius样式目前只有高版本的浏览器才支持，例如谷歌浏览器，火狐，ie9+等浏览器；

10. 如果你想兼容所有的浏览器，就可以考虑用背景图的形式设置，首先切出一张圆角按钮图片，然后用background样式设置背景图，而且设置合适的宽高，并去掉默认的边框；
    

    

11. 再次预览html，button按钮圆角设置成功了，可以查看所有浏览器，均能正常显示。