overflow: hidden 仅裁剪常规文档流中的直接子元素；图片若脱离该作用域（如 absolute、transform、opacity
直接给父容器加 overflow: hidden 能解决图片溢出，但仅当图片是普通流内元素且未触发新层叠上下文时才可靠；多数“失效”场景其实是子元素脱离了裁剪作用域。
为什么 overflow: hidden 有时对图片没用
这不是属性写错了，而是浏览器裁剪机制有明确限制：overflow: hidden 只裁剪「常规文档流中的直接子元素」。一旦图片用了 position: absolute、transform（如 scale 或 rotate）、will-change，或父容器本身有 opacity ，它就会创建新的层叠上下文，绕过父级的裁剪逻辑。
- 常见漏出场景：轮播图箭头绝对定位在圆角外侧、悬停缩放的头像、带
transform: translateY(-10px)的卡片标题 - 检查方法：在 DevTools 中选中图片，看 Computed 面板里
contain和isolation是否被隐式触发 - Safari 尤其敏感——哪怕只加了
transform: translateZ(0)，也可能让裁剪在动画帧中“松开”
必须配合 border-radius 使用的三个关键点
单独加 overflow: hidden 不足以保证视觉圆角成立，还需确认以下三点是否同步生效：
- 父容器必须显式声明
border-radius，且值 > 0；仅靠box-shadow模拟边框无效 - 图片自身不要设
border-radius，否则高缩放比下边缘发虚；应由父容器统一控制裁剪边界 - 若父容器有背景渐变或图片，务必加
background-clip: padding-box，否则背景会铺满边框外缘，盖住圆角视觉效果
动画中圆角裁剪脱钩的稳解法
Safari 和部分 Chrome 版本在 transition 或 @keyframes 过程中，overflow: hidden + border-radius 容易出现短暂破框。这不是 bug，是渲染层未同步更新裁剪上下文。此时不能只依赖 overflow：
- 优先加
transform: rotate(0deg)到父容器——不改变视觉，但强制升格为合成层，绑定裁剪与动画生命周期 - 若已用
will-change: transform或translateZ(0)，不必重复加rotate(0deg)，避免冗余图层 - 极端兼容需求下，用
-webkit-mask: radial-gradient(circle at top left, transparent 12px, #000 12px) top left / 100% 100%（数值需与border-radius一致）
真正容易被忽略的是：裁剪是否生效，不取决于你写了多少条规则，而取决于「哪个元素实际承载了圆角边界」和「哪个元素真正处在裁剪作用域内」。很多时候问题不在图片，而在父容器的高度塌陷、浮动未清除，或子元素悄悄触发了隔离上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
