使用 border-radius 属性可以轻松实现网页元素的圆角边框。1. 基本写法是直接设置 border-radius 值，如 border-radius: 10px; 可使四角均呈现圆角；2. 使用百分比值（如 border-radius: 50%）可灵活创建圆形或椭圆形状；3. 可通过 border-top-left-radius、border-top-right-radius 等属性单独设置某一角的圆角；4. 实际应用中可用 border-radius: 999px; 创建胶囊按钮，并配合 overflow: hidden 显示图片圆角效果。掌握这些方法能让页面设计更美观。
设置圆角边框在网页设计中很常见，用 HTML 和 CSS 实现其实很简单。核心就是使用 border-radius 这个属性。
一、border-radius 的基本写法
想给一个元素加上圆角，最直接的方式是设置 border-radius 的值。比如：
.box { border-radius: 10px;}
这样四个角都会变成 10px 的圆角。你可以把它加在一个 div、按钮或者图片上，效果都很直观。
立即学习“前端免费学习笔记（深入）”；
如果你希望每个角的圆角不一样，也可以分别指定：
border-radius: 10px 20px 30px 40px;
顺序对应的是：上左、上右、下右、下左，顺时针一圈。
二、用百分比设置更灵活的圆角
除了像素，你还可以用百分比来设置 border-radius，这时候圆角的大小会根据元素自身的宽度和高度进行比例计算。
比如一个圆形头像就很适合用百分比实现：
.circle { width: 100px; height: 100px; border-radius: 50%;}
不管这个元素多大，只要宽高一样，设为 50% 就能变成一个完美的圆形。如果是椭圆，宽高不同也照样适用。
三、单独设置某一个角的圆角
有时候你只想让某个角是圆角，其他保持直角。CSS 提供了单独设置每个角的写法：
border-top-left-radius: 15px;border-top-right-radius: 0;border-bottom-right-radius: 30px;border-bottom-left-radius: 5px;
这种写法更适合对细节要求比较高的布局，比如自定义对话框或卡片样式。
四、实际应用中的一些小技巧
如果你想做一个胶囊形状的按钮，可以这样写：
.btn { padding: 10px 20px; border-radius: 999px; /* 看起来像完全圆角 */}
这样无论按钮多长，两边都会是半圆形。
图片加圆角时，注意 overflow: hidden 要配合使用，否则可能显示不全。
基本上就这些。border-radius 不复杂，但用得好能让页面看起来更精致。
以上就是HTML如何设置圆角边框？border-radius怎么使用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1565756.html
微信扫一扫 
支付宝扫一扫 
