根本原因是box-sizing:content-box使border额外撑开尺寸，导致宽高失衡；应设相等宽高、box-sizing:border-box、border-radius:50%及overflow:hidden，并避免rem单位在旧安卓WebView中引发解析bug。
border-radius: 50% 加 border 后变椭圆，根本原因是 box-sizing
加了 border 后圆形头像或小圆点变扁、边缘发虚，不是 border-radius 失效，而是默认的 box-sizing: content-box 让 border 额外撑开了元素总尺寸。比如设了 width: 100px; height: 100px; 再加 border: 2px solid #000，实际渲染宽高就变成 104×104px，但圆角半径仍按原始 100px 的 50%（即 50px）计算，导致水平/垂直裁剪不一致。
解决方法很简单：
- 显式设置
box-sizing: border-box，让 border 包含在设定的宽高内 - 确保
width和height相等（不能只写width: 100%而不控高） - 避免用 rem 或 % 做宽高值，除非父容器严格正方形且无 padding/margin 干扰
安卓下 border-radius: 50% 用 rem 单位会变形
在老版本安卓 WebView（尤其 Android 4.x–6.x）中，rem 单位参与 border-radius 百分比计算时存在解析 bug：浏览器可能把 50% 当作相对于根字体大小而非元素自身宽高，导致圆角严重失真——有的圆、有的扁、有的直接塌成直角。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对需要精确圆形的元素（如 tab 指示点、头像），改用固定像素值，例如
width: 18px; height: 18px; border-radius: 50%; - 若必须响应式，可用
clamp()或媒体查询 fallback，但别依赖 rem + 百分比组合 - 测试时重点覆盖 Android 5–7 系统的 UC、QQ、微信内置浏览器
图片元素加 border 和 border-radius 时的兼容性陷阱
<img> 标签在 Safari 和部分安卓浏览器中，当同时设置 border 和 border-radius 时，圆角会失效或锯齿明显。这不是 CSS 规范问题，而是渲染引擎对替换元素（replaced element）的边界处理差异。
绕过方式只有两种：
- 给
<img>外层套一层<div>，把border和border-radius全部挪到父容器上，<img>自身只负责object-fit: cover和object-position: center - 完全弃用
border，改用outline（但 outline 不支持圆角）或box-shadow: 0 0 0 2px #xxx模拟边框
为什么 overflow: hidden 有时也救不了圆角变形
加了 overflow: hidden 却仍看到直角或溢出，常见于以下情况：
- 父容器没设
position: relative，而子元素用了transform或absolute定位，导致裁剪上下文丢失 - 元素有
backface-visibility: hidden或will-change: transform，触发了独立层叠上下文，使overflow失效 - 使用了
clip-path但未配合isolation: isolate，在某些安卓机型上裁剪区域错位
真正稳的组合是：width === height + box-sizing: border-box + border-radius: 50% + 外层容器 overflow: hidden（且无 transform 干扰）——少一个都可能在某个机型上翻车。
