border-radius支持1–4个值按顺时针设四角，双值为左上/右下、右上/左下；椭圆需用“/”分隔水平/垂直半径；百分比在flex中易失效；须配合overflow: hidden裁剪子元素。
border-radius 支持多个值，顺序和省略规则常被误解
很多人以为 border-radius 只是“一个数变圆”，实际它接受 1–4 个长度值或百分比，按顺时针顺序分别对应左上、右上、右下、左下。写成 border-radius: 10px 5px; 并不是“左右都 10，上下都 5”，而是左上=右下=10px，右上=左下=5px —— 这是容易出错的起点。
常见错误现象：元素看起来“一边圆一边方”，其实是值没对齐。比如想让右上和右下都圆，却只写了两个值，结果左下也被设成了第二个值。
-
border-radius: 8px;→ 四角统一 8px -
border-radius: 8px 12px;→ 左上/右下=8px，右上/左下=12px -
border-radius: 8px 12px 4px;→ 左上=8px，右上/左下=12px，右下=4px（左上无配对，取自身） -
border-radius: 8px 12px 4px 6px;→ 依次：左上、右上、右下、左下
椭圆圆角要用斜杠语法，不是空格
要让左上角变成水平半径 20px、垂直半径 10px 的椭圆弧，得用 border-radius: 20px / 10px;。斜杠前后分别控制水平和垂直方向的弧度，中间不能用空格或逗号代替。
使用场景：做胶囊按钮、非对称卡片、模拟真实物理边缘（比如 iOS 的圆角设计）。纯圆形角（如 50%）在宽高不等时会失效，必须用斜杠语法才能保真。
立即学习“前端免费学习笔记（深入）”；
-
border-radius: 20px / 10px;→ 所有角都是横 20、纵 10 -
border-radius: 20px 10px / 15px 5px;→ 左上横20纵15，右上横10纵5，右下横20纵15，左下横10纵5 - 错误写法：
border-radius: 20px, 10px;或border-radius: 20px 10px;（后者是双值简写，不是椭圆）
百分比圆角在 flex/grid 容器里可能失效
当父容器没有明确宽高（比如 display: flex 下子项未设 width），border-radius: 50% 会按内容尺寸计算，而不是容器尺寸，结果常常不是正圆，甚至完全不圆。
性能影响不大，但兼容性要注意：Safari 旧版本对百分比 + flex 组合的支持不稳定，Chrome 和 Firefox 相对好些。真正要画正圆，优先用固定像素值或确保父容器有确定尺寸。
- 安全做法：给元素加
width和height，再设border-radius: 50% - 替代方案：用
border-radius: 9999px;模拟全圆（适合不定宽高但需视觉圆角的场景） - 避免在
min-content或fit-content宽度的 flex 项上依赖50%
border-radius 不会裁剪子元素溢出，需要配合 overflow
只设 border-radius 不会让子元素自动“贴边”；图片、文字、绝对定位子元素仍可能撑破圆角边界。这是最常被忽略的一环。
原因：border-radius 只影响边框绘制路径，不改变盒模型的布局边界或裁剪行为。必须显式加 overflow: hidden 才能生效。
- 典型错误：卡片里放一张大图，设了
border-radius: 12px;，但图片四角还是直的 - 修复方式：给卡片加
overflow: hidden; - 注意点：
overflow: hidden会影响position: absolute子元素的定位参考系（会以该元素为 containing block）
