移动端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></video> 是原生媒体组件，不走标准 CSS 盒模型裁剪路径，border-radius 对它本身基本无视觉影响。你看到的“没效果”，是渲染架构限制，不是写错了。
正确做法是：给它的**直接父容器**同时设置 border-radius 和 overflow: hidden，由容器负责裁剪。
- 确保父容器尺寸 ≥
video实际渲染尺寸（object-fit: cover时尤其注意） - 微信/支付宝小程序中，还需再包一层
<cover-view></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%，缩放时遮罩偏移一像素，圆角就露馅了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
