当使用 `background-size: cover` 和 `border-radius` 时，背景图可能超出圆角边界；只需为带圆角的容器添加 `overflow: hidden` 即可强制裁剪溢出内容。
在 CSS 中，border-radius 仅影响元素的边框与背景的绘制区域外观，但不会自动裁剪子元素或背景图像的渲染范围。即使父容器设置了圆角，其内部的绝对定位元素（如 .overlay）或背景图仍可能突破视觉边界——尤其当 width/height 超过容器尺寸（例如 width: 105%）或存在 transform 偏移时。
解决该问题的核心原则是：显式启用容器的裁剪上下文。为此，需在具有 border-radius 的容器（即 .whitebox）上添加：
div.whitebox {
/* ...原有样式... */
border-radius: 3%;
overflow: hidden; /* ✅ 关键修复：创建裁剪边界 */
}✅ overflow: hidden 会为该元素建立一个新的块级格式化上下文（BFC），并使其成为裁剪容器（clipping container），所有超出其 padding box（含圆角）的内容（包括子元素、背景图、伪元素及 transform 移动后的区域）都将被严格裁剪。
⚠️ 注意事项：
- 不要仅依赖 border-radius 期望自动裁剪——它不具备裁剪功能；
- 若 .overlay 使用了 transform: translate() 或旋转，确保其父容器（.titleclass）也设置了 overflow: hidden（当前代码中已存在，是良好实践）；
- 避免对 body 或 html 设置 overflow: hidden，以免影响全局滚动；
- overflow: hidden 不会影响 Flex/Grid 布局行为，但会隐藏任何溢出的子内容（包括 tooltip、下拉菜单等），请按需权衡。
完整修复后的关键 CSS 片段如下：
div.whitebox {
position: relative;
left: -5%;
width: 75%;
height: 75%;
background-color: white;
border-radius: 3%;
overflow: hidden; /* ← 必加！否则圆角仅为“视觉装饰”，无裁剪效果 */
}如此修改后，无论 .overlay 如何通过 transform 扩展或偏移，都会被 .whitebox 的圆角边界精准裁剪，实现真正“内嵌于白框”的视觉效果。
