CSS 圆角实战：border-radius、椭圆半径与内容裁切

border-radius 用一个到四个值设置盒子四角的圆角；每个角实际由水平、垂直两个半径构成，因此可以画椭圆弧。它控制边框轮廓，也会影响背景绘制，但它不是通用的子元素裁切开关。

一到四个值怎么映射

.panel {
  border-radius: 1rem;                 /* 四角相同 */
}

.dialog {
  border-radius: 1rem 1rem 0.25rem 0.25rem; /* 左上、右上、右下、左下 */
}

.ticket {
  border-radius: 1rem 0.25rem;         /* 左上/右下，右上/左下 */
}

三个值依次代表左上、右上与左下、右下；四个值按左上、右上、右下、左下顺时针排列。语义不清时宁可使用四条 longhand 属性，也不要为了少几个字符让维护者重新推导映射。

斜线前后分别描述水平和垂直半径：

.pill {
  border-radius: 999px;
}

.ellipse {
  border-radius: 50% / 30%;
}

.asymmetric {
  border-radius: 1rem 2rem 3rem 0.5rem / 0.5rem 1rem 2rem 3rem;
}

斜线省略时，每个角的垂直半径等于水平半径；出现斜线后，左右两侧各自遵循一到四值映射。百分比水平半径以边框盒宽度为参照，垂直半径以边框盒高度为参照。因此矩形上的 50% 是椭圆角，不一定是圆。头像若要成为圆，先保证宽高相等，再使用 border-radius: 50%。

若相邻圆角半径之和超出盒子边长，浏览器会按比例缩小半径，使曲线不互相重叠。极端圆角值不意味着内容区域被挤压到零，也不保证视觉形状与原始半径成比例放大。

背景、图片和子元素

圆角可裁切元素自身背景；背景具体绘制到边框、内边距还是内容盒，仍由 background-clip 决定。图片或子元素超出父盒时，是否裁切还取决于 overflow 或 clip-path。不要为了图片圆角就在整个卡片上盲目设置 overflow: hidden：这可能切掉阴影、下拉菜单、键盘焦点轮廓或弹出的操作层。

可只让媒体本身裁切：

.card {
  border-radius: 1rem;
}

.card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 1rem 1rem 0 0;
}

.card__menu {
  position: absolute;
  /* 菜单留在未裁切的卡片容器内。 */
}

这里的菜单定位还需要由合适的祖先建立定位上下文；实际组件可以把浮层移到卡片外或使用 Popover 等机制。边框线有时会与背景裁切位置看起来不一致，应结合 background-clip 和实际设计验证。

现代浏览器通常不需要给 border-radius 添加厂商前缀。若项目仍支持旧版嵌入式 WebView 或特殊终端，先根据明确的浏览器矩阵测试，再决定是否增加兼容代码；前缀不能替代真实验证。

交付检查

1. 检查不同宽高比、动态内容和 200% 缩放，确认角半径没有造成意外椭圆。
2. 确认图片、视频、背景和边框的裁切范围符合预期。
3. 键盘 Tab 到卡片内控件，验证焦点轮廓、阴影和弹出层没有被切掉。
4. 测试高对比度、深色主题和实际目标浏览器。
5. 表单控件的圆角不应削弱边界识别，也不应用形状单独表达错误或状态。

参考：MDN border-radius、MDN background-clip、MDN overflow、CSS Backgrounds and Borders。