android 2.3 自带浏览器不支持 border-radius 百分比，整条声明被忽略，需用 border-radius: 999px 替代；android 4.2.x 不支持缩写语法，须先写四个单侧属性再补缩写；img 元素需外层包裹并设 overflow: hidden；祖先 overflow: hidden 会硬裁圆角，可用 will-change: transform 破解。
Android 2.3 不支持 border-radius: 50% 这类百分比写法
Android 2.3 自带浏览器（基于 WebKit 534.30）压根不解析百分比值，border-radius: 50% 整条声明会被直接忽略，退化为直角。这不是语法错误，是引擎能力缺失。
实操建议：
- 改用足够大的像素值替代，例如
border-radius: 999px—— 只要大于元素宽高一半，视觉上就是正圆 - 避免混用单位，如
border-radius: 50% / 10px，这种椭圆写法在 Android 2.3 和 IE9 都不认 - 若需兼容 Android 2.3 + iOS 6 等老环境，建议统一用
border-top-left-radius等单侧扩写，再补一句缩写兜底
Android 4.2.x 系统浏览器不支持 border-radius 缩写语法
小米3、红米、阿里云OS 等基于 Android 4.2.x 内核的定制系统，其自带浏览器会跳过 border-radius: 12px 这类缩写，但能识别四个独立属性（如 border-top-left-radius）。
常见错误现象：开发者写了完整缩写，DevTools 里显示“已启用”，真机却仍是直角。
实操建议：
- 把缩写声明放在最后，确保四个单侧属性先生效：
border-top-left-radius: 12px; border-top-right-radius: 12px; …; border-radius: 12px; - 加
background-clip: padding-box防止背景色溢出圆角区域（Android 4.2.x 中背景常撑满边框盒） - 注意：安卓版 Chrome 不受影响，该问题仅限系统 WebView 或原生浏览器
<img> 在 Android/Safari 低版本中圆角失效，不是 border-radius 没起作用
直接给 <img> 元素设 border-radius: 50%，在 Android 4.1–4.2 和 iOS Safari ≤ 9 中大概率无效——不是属性被忽略，而是渲染层绕过了裁剪逻辑。
根本原因：WebKit 对图片这类替换元素，在未包裹、无明确尺寸、或父容器有 transform 时，会主动禁用硬件加速下的圆角裁剪。
实操建议：
- 必须用父容器包裹：
<div class="avatar"><img src="..."></div>，并在.avatar上设width、height、border-radius和overflow: hidden - 避免在父容器上同时用
will-change: transform或transform: scale()，否则可能触发新合成层，反而让圆角失效 - 如需动画，优先用
clip-path: circle(50% at 50% 50%)（iOS ≥ 15.5 / Chrome ≥ 100），它不依赖 overflow 机制
真机调试时发现圆角“时有时无”，大概率是祖先元素的 overflow: hidden 干扰
尤其在 iOS Safari 和 Android WebKit WebView 中，只要任意祖先元素（比如 .page-wrapper 或弹窗遮罩层）设了 overflow: hidden，且未创建新层叠上下文，子元素的 border-radius 就会被硬裁成直角——DevTools 里看样式正常，真机上就是不对。
实操建议：
- 用
getComputedStyle(el.parentElement).overflow逐级向上查，别只盯着目标元素 - 最快破局法：给圆角元素自身加
will-change: transform，强制创建独立渲染层 - 如果不能改祖先样式，就别依赖
border-radius裁剪，改用clip-path或 SVG mask（但注意兼容性断层）
border-radius: 12px 写没写对，而是它所依赖的盒模型是否稳定、祖先是否静默干预、以及设备内核是否选择性执行规范。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
