border-radius可创建圆角效果，通过单值、多值或斜杠语法设置；支持像素与百分比单位，结合独立属性精确控制各角，提升界面美观度。
使用 CSS 的 border-radius 属性可以轻松实现元素的圆角效果。它允许你为一个元素的边框设置圆角，数值越大，圆角越明显。下面介绍几种常用方法和技巧。
基本语法与单值设置
最简单的用法是给 border-radius 设置一个统一的值，使四个角都呈现相同程度的圆角。
例如：div { border-radius: 10px; } —— 四个角都变成 10px 的圆角。
也可以使用百分比：border-radius: 50%; 在正方形元素上可创建一个完美的圆形。
立即学习“前端免费学习笔记（深入）”；
分别设置四个角
如果你希望每个角的圆角不同，可以按顺时针顺序分别指定左上、右上、右下、左下四个角的值：
border-radius: 10px 20px 30px 40px;
这表示：
- 左上角：10px
- 右上角：20px
- 右下角：30px
- 左下角：40px
水平与垂直半径（椭圆圆角）
border-radius 实际上支持两组值：水平半径和垂直半径，用斜杠 / 分隔。
语法：border-radius: 水平值 / 垂直值;
例如：border-radius: 20px / 10px; 表示水平方向圆角为 20px，垂直方向为 10px，形成椭圆边缘效果。
单独控制某个角
CSS 还提供四个独立属性，用于精确控制每个角：
border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius
比如：border-top-left-radius: 15px; 只让左上角变圆。
基本上就这些。合理使用 border-radius 能让界面更柔和美观，从按钮到卡片布局都很实用。不复杂但容易忽略细节，特别是斜杠语法和单位搭配。
