当使用 borderRadius 设置圆角容器并启用内部滚动时，因默认盒模型（content-box）导致 padding 和 border 被额外计算，使内容区域超出圆角边界，造成视觉上“圆角被截断”。解决方案是强制启用 box-sizing: border-box，确保宽高包含 padding 与 border，从而让裁剪边界与视觉圆角严格对齐。
当使用 `borderradius` 设置圆角容器并启用内部滚动时，因默认盒模型（content-box）导致 padding 和 border 被额外计算，使内容区域超出圆角边界，造成视觉上“圆角被截断”。解决方案是强制启用 `box-sizing: border-box`，确保宽高包含 padding 与 border，从而让裁剪边界与视觉圆角严格对齐。
在你提供的 React + CSS-in-JS 布局中，外层 <div> 应用 <code>borderRadius: "2rem" 和 padding: "2rem"，但未显式声明 box-sizing，因此浏览器按默认的 content-box 解析：容器总高度 = 内容高度 + 上下 padding（各 2rem），导致实际可滚动区域向下延伸超出圆角底边——此时即使设置了 overflow-y: auto，滚动容器的裁剪边界仍由原始盒模型决定，系统不会自动将滚动内容按父容器圆角路径裁剪（这与 Android 的 MaterialCardView 圆角裁剪失效原理类似，本质都是渲染层缺乏路径裁剪干预）。
✅ 正确做法是在父容器上添加 box-sizing: border-box，使其宽高约束包含 padding，从而让 borderRadius 的裁剪作用域真正覆盖整个可视区域：
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "start",
width: "100%",
height: "auto",
padding: "2rem",
gap: "1rem",
borderRadius: "2rem",
backdropFilter: "blur(4rem)",
background: "goldenrod",
// ? 关键修复：启用 border-box 模型
boxSizing: "border-box",
// ? 可选：显式定义 overflow 行为（如需滚动）
overflowY: "auto",
maxHeight: "50vh", // 防止无限撑高，配合滚动更可控
}}
>
{/* 子内容保持不变 */}
<div className="text-3xl unselectable font-bold" style={{ /* ... */ }}>
{/* ... */}
</div>
<div className="card-container-grid-2">
{/* ... */}
</div>
</div>⚠️ 注意事项：
-
box-sizing: border-box是 CSS 基础但常被忽略的属性，建议在项目根样式（如:root或*重置）中全局启用：*, *::before, *::after { box-sizing: border-box; } - 仅设置
box-sizing不足以解决所有圆角裁剪问题。若容器内含绝对定位子元素、transform平移内容、或使用backdrop-filter等合成层特性，仍可能突破裁剪边界。此时需额外配合overflow: hidden（确保裁剪生效）及避免transform: translateZ(0)等触发新层叠上下文的写法。 - 在响应式网格中（如你的
.card-container-grid-2），grid-auto-rows: 12rem固定行高可能导致最后一行卡片底部留白或挤压，建议改用minmax(12rem, auto)或结合align-content: start控制对齐。
总结：圆角失效的本质不是“滚动导致”，而是盒模型与裁剪边界不一致所致。box-sizing: border-box 是最轻量、最可靠的第一道修复；它让开发者对尺寸的预期与浏览器渲染结果严格一致，是构建可控、可预测 UI 的基石。
