一、作用：
用于设置元素四个角的圆角效果，让元素不再死板，更加柔和。
二、基本语法：
border-radius: 圆角大小;
单位：px（像素）或 %（百分比）
示例：
div {
border-radius: 10px;
}
三、常见写法：
1）统一圆角：
border-radius: 10px; （四个角都是 10px）
2）上下对称：
border-radius: 10px 20px; （左上右下为 10px，右上左下为 20px）
3）四个角分别设置（顺时针）：
border-radius: 10px 20px 30px 40px;
（左上、右上、右下、左下）
4）单独设置某一个角：
border-top-left-radius: 15px;
border-bottom-right-radius: 5px;
四、实现圆形：
元素宽高相等 + 圆角 50% → 圆形容器或头像
示例：
div {
width: 100px;
height: 100px;
border-radius: 50%;
}
五、常用场景示例：
按钮圆角：
button {
border-radius: 6px;
}
头像圆形：
img {
border-radius: 50%;
}
提示框圆角卡片：
.card {
border-radius: 8px;
}
六、总结记忆：
-
所有角一样： border-radius: 10px;
-
顺时针四角： border-radius: 上右下左;
-
圆形头像： border-radius: 50%;
-
常与背景、边框、阴影一起使用，美化 UI 效果显著
