overflow: hidden 仅裁剪常规文档流中的直接子元素；图片若脱离该作用域（如 absolute、transform、opacity<1 等触发新层叠上下文），则失效。
直接给父容器加能解决图片溢出，但仅当图片是普通流内元素且未触发新层叠上下文时才可靠；多数“失效”场景其实是子元素脱离了裁剪作用域。
为什么
overflow
: hidden 有时对图片没用
这不是属性写错了，而是浏览器裁剪机制有明确限制：
只裁剪「常规文档流中的直接子元素」。一旦图片用了
、
（如
或
）、
，或父容器本身有
，它就会创建新的层叠上下文，绕过父级的裁剪逻辑。
常见漏出场景：轮播图箭头绝对定位在圆角外侧、悬停缩放的头像、带
的卡片标题
检查方法：在 DevTools 中选中图片，看 Computed 面板里
和
是否被隐式触发
Safari 尤其敏感——哪怕只加了
，也可能让裁剪在动画帧中“松开”
必须配合 border-radius 使用的三个关键点
单独加
不足以保证视觉圆角成立，还需确认以下三点是否同步生效：
父容器必须显式声明
，且值 > 0；仅靠
模拟边框无效
图片自身不要设
，否则高缩放比下边缘发虚；应由父容器统一控制裁剪边界
若父容器有背景渐变或图片，务必加
，否则背景会铺满边框外缘，盖住圆角视觉效果
动画中圆角裁剪脱钩的稳解法
Safari 和部分 Chrome 版本在
或
过程中，
容易出现短暂破框。这不是 bug，是渲染层未同步更新裁剪上下文。此时不能只依赖
：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
优先加
到父容器——不改变视觉，但强制升格为合成层，绑定裁剪与动画生命周期
若已用
或
，不必重复加
，避免冗余图层
极端兼容需求下，用
（数值需与
一致）
真正容易被忽略的是：裁剪是否生效，不取决于你写了多少条规则，而取决于「哪个元素实际承载了圆角边界」和「哪个元素真正处在裁剪作用域内」。很多时候问题不在图片，而在父容器的高度塌陷、浮动未清除，或子元素悄悄触发了隔离上下文。
overflow: hiddenoverflow: hiddenposition: absolutetransformscalerotatewill-changeopacity < 1transform: translateY(-10px)containisolationtransform: translateZ(0)overflow: hiddenborder-radiusbox-shadowborder-radiusbackground-clip: padding-boxtransition@keyframesoverflow: hidden + border-radiusoverflowtransform: rotate(0deg)will-change: transformtranslateZ(0)rotate(0deg)-webkit-mask: radial-gradient(circle at top left, transparent 12px, #000 12px) top left / 100% 100%border-radius