button圆角怎么设置

 时间:2026-02-14 07:13:24

1、新建一个html文件,在html内写新建一个button标签:

<input type="button" name="button" value="设置圆角" class="btn">;同时给button先加上样式:

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

button圆角怎么设置

2、预览html文件,可以看到现在button按钮暂时还没有圆角;

button圆角怎么设置

3、css样式设置圆角有专门的样式(border-radius),因此button按钮设置圆角可以加上:border-radius: 15px;

button圆角怎么设置

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

button圆角怎么设置

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

button圆角怎么设置

button圆角怎么设置

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

button圆角怎么设置

  • html页面单选框怎么实现
  • jsp页面如何连接数据库并以表格的形式输出?
  • 怎么让两个div在同一行
  • 如何在HTML中插入图片
  • html/css如何让背景颜色半透明?
  • 热门搜索
    爬格子是什么意思 7月14号是什么情人节 1981年属什么 什么是人生观 维修费计入什么科目 安徽有什么特产 多潘立酮片是什么药 股票r是什么意思 虚怀若谷是什么意思 什么的大象