设置元素圆角使用CSS的border-radius属性，可接受一个到四个值分别控制不同角，单位常用px或%，通过百分比可创建圆形或椭圆，如正方形加border-radius:50%变圆形，还可单独设置每个角如border-top-left-radius，并常用于按钮、卡片、头像等提升视觉效果。
设置元素的圆角非常简单，使用 CSS 的 border-radius 属性即可。这个属性可以让元素的四个角变得圆润，适用于图片、按钮、卡片等各种元素。
基本语法
border-radius 可以接受一个或多个长度值或百分比，表示圆角的半径大小。单位常用 px（像素）、em 或 %。
- 一个值：四个角相同
- 两个值：第一个用于左上和右下，第二个用于右上和左下
- 三个值：分别对应左上、右上/左下、右下
- 四个值：顺时针顺序为左上、右上、右下、左下
例如：
/* 四个角都是10px */ border-radius: 10px;/ 左上和右下5px，右上和左下15px / border-radius: 5px 15px;
/ 左上10px，右上和左下20px，右下10px / border-radius: 10px 20px 10px;
/ 分别设置四个角 / border-radius: 10px 20px 30px 40px;
使用百分比创建圆形或椭圆
当元素是正方形时，设置 border-radius: 50% 可以将其变成一个圆形；如果是矩形，则会变成椭圆。
立即学习“前端免费学习笔记（深入）”；
/* 圆形头像示例 */
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
单独设置每个角
如果只想调整某个角，可以使用以下子属性：
- border-top-left-radius：左上角
- border-top-right-radius：右上角
- border-bottom-right-radius：右下角
- border-bottom-left-radius：左下角
例如只让左上角变圆：
border-top-left-radius: 15px;
实用技巧
实际开发中常见用法包括：
- 按钮加轻微圆角提升亲和力：
border-radius: 4px; - 卡片组件常用较大圆角：
border-radius: 12px; - 图片加圆角避免生硬边缘
- 配合 overflow: hidden，确保内容不溢出圆角区域
基本上就这些，border-radius 使用起来很直观，合理搭配能显著提升页面视觉效果。
