移动端border-radius不生效主因是祖先元素overflow:hidden创建硬裁剪边界，需通过transform/layer触发层叠上下文或-webkit-mask强制裁剪；video须由父容器+overflow:hidden裁剪，Safari动画破框需mask兜底。

父容器 overflow: hidden 干扰子元素圆角渲染

移动端（尤其是 iOS Safari）和部分 Android WebView 中，overflow: hidden 会强制创建一个“硬裁剪边界”，只要任意祖先元素设置了它，且未触发新的层叠上下文，子元素的 border-radius 就会被直接裁掉——不是没生效，是被截断了。

常见藏匿位置：.scroll-container、.modal-overlay、body（弹窗锁屏时加的）、甚至第三方 UI 库的 wrapper 元素。

• 用 DevTools 选中目标元素，在 Styles 面板里逐级点开父节点，看 overflow 值是否为 hidden 或 clip
• 临时在控制台执行：getComputedStyle($0.parentElement).overflow，一层层往上试
• 别只查直接父级——WebKit 会向上穿透整个祖先链

video 元素上直接设 border-radius 无效

<video> 是原生媒体组件，不走标准 CSS 盒模型裁剪路径，border-radius 对它本身基本无视觉影响。你看到的“没效果”，是渲染架构限制，不是写错了。

正确做法是：给它的**直接父容器**同时设置 border-radius 和 overflow: hidden，由容器负责裁剪。

立即学习“前端免费学习笔记（深入）”；

• 确保父容器尺寸 ≥ video 实际渲染尺寸（object-fit: cover 时尤其注意）
• 微信/支付宝小程序中，还需再包一层 <cover-view>，否则原生视图仍可能破框
• 避免给 video 自身加 transform 或 will-change，这会让某些平台进一步绕过裁剪逻辑

Safari 下 transition + overflow: hidden 导致圆角“破框”

悬停缩放、hover 动画时，Safari 的 overflow: hidden 裁剪会在动画过程中短暂失效，内容从圆角边缘溢出。这不是 bug，是 WebKit 渲染引擎在过渡阶段对裁剪边界的重算缺陷。

仅靠 will-change: transform 或 translateZ(0) 无法根治，必须换底层机制。

• 用 -webkit-mask 替代裁剪：-webkit-mask: radial-gradient(circle at center, #000 0%, #000 12px, transparent 12px)
• 配套必须设：mask-size: 100% 100%、mask-repeat: no-repeat、mask-position: center
• overflow: hidden 保留作为其他浏览器的降级兜底，不要删

border-radius 值本身被静默忽略

看似写了 border-radius: 8px，但开发者工具里 computed 样式显示为 0 或空值？很可能是语法或语义问题导致整条声明被浏览器丢弃。

• 单位缺失：border-radius: 8（缺 px/rem）→ 浏览器直接忽略整行
• 负值非法：border-radius: -2px → CSS 规范禁止，静默失效
• 预处理器变量展开为 0：$radius: 0; border-radius: $radius; → 结果就是直角
• 被框架重置覆盖：比如 Bootstrap 的 button 默认有 border-radius: 0.375rem，但某些插件或自定义 class 可能加了 !important 覆盖成 0

真正难排查的，往往是 overflow: hidden 藏在第 5 层祖先里，而你只盯着当前元素调样式；或者 mask-size 没设 100% 100%，缩放时遮罩偏移一像素，圆角就露馅了。