17370845950

当为带有 `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 即可稳健解决溢出问题。