border-radius 可统一或独立设置四个圆角，支持1到4个值的简写语法，分别对应不同角的半径，也可使用具体方向属性精确控制，如 border-top-left-radius；还支持斜杠分隔的x/y轴半径，实现椭圆圆角效果。
在CSS中，border-radius 属性不仅可以统一设置元素的圆角，还支持对四个角进行独立控制。通过合理使用该属性的语法，你可以为左上、右上、右下、左下每个角分别设置不同的圆角半径。
理解 border-radius 的简写语法
border-radius 实际上是四个方向属性的简写：
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
使用简写时，可以传入1到4个值，表示不同角的半径：
例如：
单独控制每个角的圆角
如果不想用简写，也可以直接使用具体的方向属性精确控制每个角：
这种方式更清晰，适合需要精细调整布局的场景。
立即学习“前端免费学习笔记（深入）”；
设置椭圆圆角（x/y 轴半径）
border-radius 还支持设置水平和垂直两个方向的半径，实现椭圆形圆角。语法使用斜杠 / 分隔：
这种写法常用于设计特殊形状的卡片或按钮。
基本上就这些。掌握这些技巧后，你可以灵活控制任何元素的圆角效果，满足多样化的设计需求。
