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

2025-03-18 20:23:17

推荐回答（1个）

回答1：

如果浏览器支持的话, 直接一个 radius 样式就可以了；
border-radius:4px;
-webkit-border-radius: 4px；
新建一个html文件，在html内写新建一个button标签：
；同时给button先加上样式：
btn{width: 200px;height: 30px;background: #ccc;border: 1px solid #eee;}；
预览html文件，可以看到现在button按钮暂时还没有圆角；
css样式设置圆角有专门的样式（border-radius），因此button按钮设置圆角可以加上：border-radius: 15px;
特别注意，border-radius样式目前只有高版本的浏览器才支持，例如谷歌浏览器，火狐，ie9+等浏览器；
如果你想兼容所有的浏览器，就可以考虑用背景图的形式设置，首先切出一张圆角按钮图片，然后用background样式设置背景图，而且设置合适的宽高，并去掉默认的边框；
再次预览html，button按钮圆角设置成功了，可以查看所有浏览器，均能正常显示。