border-radius四个值顺时针对应左上、右上、右下、左下，写全最稳妥；百分比基于宽高分别计算，动态容器建议用像素值；需配合overflow: hidden及处理子元素脱离文档流问题。
直接用 border-radius 就能实现，但四个角的数值不写全，容易误以为“四角都圆了”，实际可能只有左上角生效。
border-radius 四个值怎么对应四个角
它接受 1–4 个值，顺序是顺时针：左上 → 右上 → 右下 → 左下。写四个值最稳妥，避免依赖默认行为：
border-radius: 8px 12px 6px 16px;
这表示：左上角 8px、右上角 12px、右下角 6px、左下角 16px。
- 只写一个值（如
border-radius: 10px）：四个角等效为10px 10px 10px 10px - 写两个值（如
border-radius: 4px 8px）：等效于4px 8px 4px 8px（上下/左右对称） - 写三个值（如
border-radius: 5px 10px 15px）：等效于5px 10px 15px 10px（左下 = 右上）
用百分比值时要注意容器尺寸
当使用百分比（如 border-radius: 50%）时，圆角半径基于容器的宽高分别计算：水平方向按宽度百分比，垂直方向按高度百分比。这意味着：
- 正方形容器 +
50%→ 完美圆形（或椭圆边框） - 长条形容器 +
50%→ 可能出现“过度圆角”，甚至边缘被裁掉 - 若容器宽高动态变化（如响应式卡片），
50%表现不稳定，建议优先用固定像素值
border-radius 和 overflow 配合失效的常见原因
给带子元素的容器设了 border-radius，但子元素（尤其是图片或绝对定位内容）依然顶到直角边缘——这是因为 overflow: hidden 没加，或子元素脱离了文档流。
- 必须显式设置
overflow: hidden才能裁切溢出部分 - 绝对定位子元素（
position: absolute）会突破overflow: hidden的限制，需额外加z-index或包裹一层相对定位父容器 - 图片默认是内联元素，有底部空白，可加
vertical-align: top或设为display: block避免错位
真正要稳住四个角的圆角，关键是写全四个值、确认父容器有 overflow: hidden、并且留意子元素是否破坏了裁剪边界——这些点漏掉一个，视觉上就“不像圆角”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
