border-radius 与 overflow:hidden 联用时圆角内仍漏内容，是因为 overflow:hidden 仅裁剪直接子元素；若子元素使用 position: absolute、transform、will-change 或触发新层叠上下文（如设置 opacity），则脱离常规流，裁剪失效。
border-radius 和
overflow
:hidden 一起用为啥圆角里还漏内容
因为
只对「直接子元素」裁剪，而如果子元素用了
、
、
或触发了新的层叠上下文（比如有
常见漏出场景：轮播图箭头绝对定位在圆角容器外侧、下拉菜单从圆角弹出、带阴影的卡片内部元素溢出。
检查子元素是否用了
且 left/top 超出父容器内边距范围
确认没意外触发
或
—— 这些会创建新层叠上下文，干扰裁剪
Chrome 120+ 对
+
的裁剪更严格，但 Safari 仍存在部分不一致，建议加
强制建立隔离
给 img 或 video 加 border-radius 后边缘发虚或锯齿
这是浏览器对位图做抗锯齿时，在圆角边缘采样不足导致的。不是 bug，是渲染机制使然，尤其在高缩放比或非整数尺寸下更明显。
实操上优先用
（仅 Safari 有效）或统一缩放到偶数宽高，但最稳的解法是换容器裁剪：
立即学习
“
前端免费学习笔记（深入）
”；
不要直接给
设
，而是套一层
overflow:hiddenposition: absolutetransformwill-changeopacityposition: absolutetransform: translateZ(0)will-change: transformborder-radiusoverflow:hiddenisolation: isolateimage-rendering: -webkit-optimize-contrastborder-radius，设 border-radius
+
overflow:hidden
，再把
img
设为
display:block
避免底部留白
如果必须用
object-fit: cover
，确保父容器宽高固定，否则动态缩放会加剧模糊
避免同时设
border-radius
和
box-shadow
在同一元素上——阴影会参与裁剪计算，进一步干扰边缘渲染
flex 或 grid 子项在圆角容器里不被裁剪
Flex 容器默认
overflow
不继承，且子项若设了
min-width: 0
或
flex-shrink: 1
，可能撑破父容器视觉边界，看起来像“没裁掉”。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
关键不是样式没生效，而是布局行为让内容实际占位超出了圆角区域：
给圆角父容器显式加上
overflow: hidden
（别依赖默认值）
对 flex 子项加
min-width: 0
+
min-height: 0
，防止文本或图片强行撑开
Grid 布局中，如果用
grid-template-columns: 1fr 2fr
之类，列宽计算可能忽略
border-radius
的视觉收缩，需配合
max-width: 100%
限制内部块级元素
动画中 border-radius 变化时 overflow:hidden 失效
当
border-radius
是动画属性（比如用
@keyframes
或 JS 修改），浏览器可能临时关闭裁剪优化，导致中间帧内容溢出。这不是 bug，是渲染管线在动画期间降级处理。
绕过方式很直接：不用动
border-radius
，改用
clip-path
替代：
用
clip-path: inset(0 round 12px)
模拟圆角裁剪，它和
overflow:hidden
兼容性更好，动画也更稳定
注意
clip-path
在 Firefox 旧版本需加
-webkit-clip-path
前缀，但现代 Chrome/Safari 已无需
如果必须兼容 IE，只能放弃动画圆角，改用 JS 分帧控制 class 切换 +
transition
，并确保每帧都重置
overflow
真正难搞的是嵌套滚动 + 圆角 + 动画三者叠加，这时候
contain: layout paint
往往比调样式更管用——但容易被忽略的是，它必须加在圆角容器本身，而不是滚动内容区。