当使用 `background-size: cover` 的元素设置了 `border-radius`，其背景图仍可能超出圆角边界；解决方法是在该容器上添加 `overflow: hidden`，强制裁剪超出部分。
在 CSS 中，border-radius 仅影响元素的边框与背景色的绘制区域，但不会自动裁剪背景图像或子元素的渲染范围。即使 .whitebox 设置了 border-radius: 3%，其内部的 background-image（若直接设在该元素上）或绝对定位的子元素（如 .overlay）仍可能因尺寸、变换（transform）或 background-size: cover 的拉伸行为而突破视觉圆角边界——造成“图片/内容溢出白框”的常见问题。
✅ 正确解法：为 .whitebox 添加 overflow: hidden
该声明会创建一个新的块级格式化上下文（BFC），并强制其内容（包括背景图像和所有后代元素）被严格限制在该元素的 padding box 内，从而与 border-radius 协同生效，实现真正意义上的圆角裁剪。
以下是修复后的关键 CSS 片段（仅展示必要修改）：
div.whitebox {
position: relative;
left: -5%;
width: 75%;
height: 75%;
background-color: white;
border-radius: 3%;
overflow: hidden; /* ✅ 核心修复：启用圆角裁剪 */
}⚠️ 注意事项：
- overflow: hidden 不会影响正常文档流中的子元素布局，但会裁剪所有超出边界的视觉内容（含 position: absolute 元素、大尺寸背景图、transform 移出区域的部分等）；
- 若 .whitebox 内部有需要部分悬停于圆角外的交互元素（如箭头、装饰图标），应改用伪元素（::before/::after）配合 z-index 和父容器 position: relative 精确控制，而非依赖 transform 越界；
- 避免对 body 或 html 设置 overflow: hidden，以免意外禁用全局滚动。
? 扩展建议：若未来需支持更精细的背景图定位（例如确保关键内容始终可见），可将 background-position 与 object-fit（用于 标签）或 mask-image（现代浏览器）结合使用，但对当前纯背景图场景，overflow: hidden + border-radius 是最简洁、兼容性最佳（IE9+）的解决方案。
