移动端 border-radius 失效主因是祖先元素 overflow: hidden 在 webkit 中触发硬裁剪，尤其 ios safari；解法包括加 will-change: transform、子元素自设 overflow: hidden 或祖先改用 overflow: clip。
移动端 border-radius 失效，90% 不是写错了，而是被祖先元素的 overflow: hidden 硬裁掉了——尤其在 iOS Safari 和 WebKit 内核 WebView 中，这是渲染机制决定的，不是 bug。
为什么 iOS 上 border-radius 看起来“没生效”
WebKit（包括 Safari 和多数 iOS WebView）把设置了 overflow: hidden 的祖先容器视为“硬裁剪边界”，只要子元素的圆角区域超出该容器的内容盒（content box），就会直接裁掉像素，不管子元素自己有没有设 border-radius。这种行为和 Chrome 桌面版不同，也和你用 DevTools 预览时看到的效果不一致——真机上才暴露。
常见诱因包括：.modal-content、.scroll-container、.page-wrapper，甚至全局锁屏时加在 body 上的 overflow: hidden。别只盯着目标元素查样式，要往上逐级看 getComputedStyle(el).overflow。
绕过 overflow: hidden 的三种实操解法
核心思路：让圆角元素脱离那个“硬裁剪上下文”，而不是改 border-radius 值本身。
- 给圆角元素加
will-change: transform—— 最轻量，触发新层叠上下文，WebKit 会单独绘制它 - 给圆角元素自身加
overflow: hidden—— 反直觉但有效，它创建了新的裁剪边界，反而保护内部圆角不被外层干扰 - 把祖先的
overflow: hidden换成overflow: clip—— 仅现代浏览器支持（iOS Safari 16.4+），语义更准确，不会触发硬裁剪
示例修复：
.avatar {
border-radius: 50%;
will-change: transform;
}
其他容易混淆的失效原因
别一上来就怀疑 overflow，先快速排除这些基础项：
-
border-radius值缺单位，比如写了border-radius: 12而不是border-radius: 12px，整条声明会被忽略 - 元素没有显式宽高（如
display: inline且无内容撑开），border-radius无法计算基准 - 背景用了渐变或图片，但没设
background-clip: padding-box，导致背景铺满边框区域，“撑平”了圆角视觉 - 父容器同时设了
border-radius和overflow: hidden，而子元素有transform（如轮播图），此时需在父容器加-webkit-backface-visibility: hidden或transform: rotate(0)
视频、<canvas></canvas>、原生组件上的 border-radius 为什么一定无效
像小程序里的 <video></video>、支付宝/微信原生视频控件、或某些 <canvas></canvas> 渲染场景，它们由客户端原生代码直接绘制，不走 WebView 的 CSS 渲染管线。border-radius 指令根本到不了那一层，所以无论怎么加前缀、加 will-change 都没用。
这时候只能用“覆盖法”：用一个带 border-radius 的 <div> 或 <code><cover-view></cover-view> 盖在上面，再设 overflow: hidden，靠遮罩实现视觉圆角——这是唯一可靠路径。
