移动端border-radius不生效大概率是祖先元素overflow:hidden干扰渲染，因webkit将其视为硬裁剪边界；需通过will-change:transform或overflow:hidden自身触发层叠上下文来绕过，同时排除单位缺失、无宽高、边框过粗等问题。
border-radius 在移动端不生效，大概率是父容器 overflow: hidden 干扰了渲染
移动端 WebKit 内核（尤其是 iOS Safari）对 border-radius 的裁剪逻辑很严格：如果某个元素设置了 border-radius，但它的**任意祖先元素**设置了 overflow: hidden（哪怕离得很远），且该祖先又没触发新的层叠上下文（transform、will-change、opacity 等），那么子元素的圆角就会被粗暴裁掉——看起来就像没生效。
这不是 bug，是 WebKit 的渲染优化行为：它把 overflow: hidden 容器当作一个“硬裁剪边界”，不考虑子元素自己的 border-radius。
如何快速定位是不是 overflow:hidden 导致的
打开 Chrome DevTools（或 Safari Web Inspector），选中那个本该有圆角却显示直角的元素，然后：
- 在 Styles 面板里逐级向上看
overflow值，特别注意overflow: hidden或overflow: clip - 临时在控制台执行：
getComputedStyle($0.parentElement).overflow，一层层往上试 - 用
Elements面板右键「Scroll into view」，观察是否被某层容器截断了视觉范围
常见藏匿位置：.page-wrapper、.scroll-container、.modal-content、甚至 body 或 html 上的全局 overflow: hidden（比如弹窗打开时加的锁屏样式）。
绕过 overflow:hidden 的几种可靠解法
核心思路：让圆角元素脱离那个“硬裁剪容器”的裁剪影响。不是改 border-radius，而是改层叠上下文或渲染层级：
- 给圆角元素自身加
transform: translateZ(0)或will-change: transform（触发新层叠上下文，WebKit 会单独绘制） - 给圆角元素加
overflow: hidden（听起来反直觉，但它会创建自己的裁剪边界，反而保护内部圆角） - 如果父容器必须
overflow: hidden，就把它换成overflow: clip（仅现代浏览器支持，iOS Safari 16.4+ 才可用） - 避免在滚动容器上设
overflow: hidden；若为遮罩目的，改用mask或伪元素覆盖
示例修复：
.avatar {
border-radius: 50%;
/* 加这行就能破局 */
will-change: transform;
}
其他容易混淆的失效原因（顺便排除）
别一上来就怀疑 overflow，先确认这些基础点：
-
border-radius值单位写错，比如写了border-radius: 5（缺px或rem），CSS 会直接忽略整条声明 - 元素没有设置
width/height或内容撑不开，导致圆角无处可施（例如空<div></div>） - 使用了
box-sizing: border-box但边框太厚，border-radius被边框本身覆盖（尤其border: 20px solid #000+border-radius: 10px会失效） - 开启了
-webkit-appearance: none的某些表单控件（如input[type="range"]）会重置默认渲染，需额外重置border-radius
真正难排查的，永远是那个看不见的 overflow: hidden 祖先——它不报错、不警告，只默默把你的圆角吃掉。动手前，先查 DOM 树顶层三到五层的 overflow 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
