border-radius 是“切掉盒模型四个角的矩形区域”，作用于 border-box 边界内；若父容器 overflow: hidden 或元素为 inline 且未设 display，圆角可能失效；值越大越圆滑，建议 ≥ border-width 的1.5倍。
直接说结论：border-radius 不是“画圆角”，而是“切掉盒模型四个角的矩形区域”——理解这点，就明白为什么有时圆角不生效、有时切得不对、有时和背景/边框打架。
border-radius 的值到底在切什么
它切的是 border-box 边界内的角，不是 content 区域，也不是 padding 区域。只要元素有明确的宽高（或被内容撑开）、且 overflow 不是 hidden 以外的特殊值（比如 clip），切角就按设定值执行。
常见错误现象：border-radius 写了但没效果 → 检查是否父容器设置了 overflow: hidden 却子元素定位溢出；或者元素本身是 inline 元素（如 span）且没设 display: inline-block 或 block。
- 单值写法：
border-radius: 8px→ 四个角都是 8px 圆角 - 双值写法：
border-radius: 4px 12px→ 水平方向 4px，垂直方向 12px（顺时针：左上/右上/右下/左下 = 4px/12px/4px/12px） - 四值写法：
border-radius: 2px 4px 8px 16px→ 依次对应左上、右上、右下、左下 - 支持分别设置水平/垂直半径：
border-radius: 10px / 5px→ 左上角是椭圆，横轴 10px、纵轴 5px
圆角 + border 出现“白边”或“断开”的原因
这不是 bug，是盒模型叠加渲染的结果：当 border 和 border-radius 同时存在，浏览器会把边框也按圆角路径绘制。但如果边框太粗、或圆角太小，某些渲染引擎（尤其是旧版 Safari 或低分辨率屏幕）会出现像素级错位，看起来像缺口或白边。
立即学习“前端免费学习笔记（深入）”；
使用场景：带描边的卡片、按钮、头像框。
- 优先用
background-clip: padding-box确保背景不溢出圆角边界 - 避免
border+box-shadow叠加时半径不一致，建议统一用box-shadow: 0 0 0 2px #ccc模拟描边（更可控） - 真要用实边框，
border-radius值建议 ≥border-width的 1.5 倍，否则右下角等位置容易锯齿明显
图片裁成圆角时 overflow: hidden 为什么有时失效
因为图片是 replaced element（替换元素），其渲染不受父容器 overflow: hidden 完全约束——尤其当图片被 transform、position: absolute 或设置了 object-fit 时，裁剪行为可能被绕过。
可靠做法永远是：让图片自己成为圆角容器。
- 给
<img>直接加border-radius: 50%（圆形头像）或具体像素值（圆角图） - 如果必须用父容器控制（比如需要 hover 动画），父容器设
border-radius+overflow: hidden，且确保img没有transform或position脱离文档流 - 慎用
object-fit: cover配合小圆角——图片缩放后边缘可能刚好卡在圆角切口处，出现意外留白
真正难的不是写对 border-radius，而是判断它此刻切的是谁的角、被谁的 overflow 截断、又被谁的 background-clip 或 transform 干扰。多看 computed styles 里的实际渲染尺寸，比死记规则管用。
