当为带有 `border-radius` 的容器设置背景图或内部绝对定位元素时，若未显式设置 `overflow: hidden`，内容可能超出圆角边界；只需在父容器上添加该声明即可强制裁剪溢出部分。
在 CSS 中，border-radius 仅定义视觉边框的圆角形状，并不会自动裁剪子元素——即使子元素使用 position: absolute 或背景图 background-size: cover，它们仍会按原始尺寸渲染，突破圆角区域。这是初学者常遇到的“图片/覆盖层溢出白框”问题（如题中 .overlay 旋转后宽度设为 105%，导致右侧超出 .whitebox 圆角边界）。
解决方法非常简洁：在具有 border-radius 的父容器上添加 overflow: hidden。该声明会创建一个新的块级格式化上下文（BFC），使所有子元素（包括绝对定位元素和背景图）的渲染被严格限制在容器的圆角边界内。
✅ 正确做法（关键修改已高亮）：
div.whitebox {
position: relative;
left: -5%;
width: 75%;
height: 75%;
background-color: white;
border-radius: 3%;
overflow: hidden; /* ← 核心修复：启用裁剪 */
}⚠️ 注意事项：
- overflow: hidden 不影响正常流内元素的布局，但会隐藏任何超出容器盒模型的内容（含阴影、伪元素、transform 偏移后的部分）；
- 若需保留滚动能力（如长文本），可改用 overflow: clip（现代浏览器支持更好，无滚动条副作用），但兼容性略低于 hidden；
- 避免在 body 或根容器滥用 overflow: hidden，以免影响整页滚动；
- 当 .overlay 使用 transform: rotate() + translate() 时，其视觉位置变化仍受父容器 overflow: hidden 约束——这正是我们期望的行为。
? 小结：border-radius 是“画布修饰”，而 overflow: hidden 才是真正的“内容裁剪开关”。二者配合使用，才能确保设计效果精准呈现。无需 JavaScript 或复杂 hack，一行 CSS 即可稳健解决溢出问题。
