border-radius生效但图片圆角不显示的主因是父容器未设overflow: hidden，导致图片溢出不被裁剪；其次需排查transform、will-change、object-fit:none及iOS渲染兼容性问题。
border-radius 生效但图片圆角不显示的常见原因
图片本身没有被裁剪，border-radius 只是给容器加了圆角，如果图片没“贴合”容器或被其他样式覆盖，视觉上就看不到圆角效果。最常踩的坑是：图片作为 overflow: hidden 之外的任何裁剪控制——border-radius 不会自动裁掉图片溢出部分。
- 确保父容器设置了
overflow: hidden（这是关键） - 避免给
border-radius后还叠加transform、clip-path或mask等干扰渲染的属性 - 检查是否意外设置了
object-fit: none导致图片撑出容器边界 - 确认没有父级元素设置了
will-change: transform或开启了硬件加速，导致圆角裁剪失效（尤其在 Safari 和旧版 Chrome）
给 img 元素直接加 border-radius 的写法与限制
可以给 border-radius，但必须配合 overflow: hidden 在其父容器上才能真正裁剪图片内容。单独写在
.avatar-wrapper {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden; /* 必须有 */
}
.avatar-wrapper img {
width: 100%;
height: 100%;
object-fit: cover; /* 推荐，避免拉伸变形 */
}-
object-fit: cover比contain更常用，能保证填满且比例正确 - 不要只依赖
img { border-radius: 50% }，没有overflow: hidden的父容器，它只是画了个圆角边框，图片内容仍方形显示 - 若用
background-image替代border-radius，无需额外overflow
移动端 Safari / iOS Webview 圆角失效的绕过方案
iOS 15.4+ 修复了多数问题，但某些混合渲染场景（如 position: fixed + border-radius + 图片）仍可能失效。此时不能只靠 overflow: hidden。
- 加
-webkit-mask-image: radial-gradient(circle, black 100%, transparent 100%)强制裁剪（兼容 iOS 12+） - 对父容器加
transform: translateZ(0)或backface-visibility: hidden防止 GPU 渲染层跳过裁剪 - 避免在圆角容器内使用
will-change: transform，它会让 Safari 放弃overflow裁剪逻辑
.avatar-wrapper {
border-radius: 50%;
overflow: hidden;
backface-visibility: hidden;
}
.avatar-wrapper img {
display: block; /* 防止底部留白导致高度计算偏差 */
}检查 border-radius 是否被重置或覆盖
浏览器默认样式、CSS 重置库（如 normalize.css）、或框架（如 Tailwind 的 rounded-none）可能在某一层覆盖了你的 border-radius。用开发者工具检查 computed 样式里的 border-radius 值是否为预期，重点看「origin」来源。
立即学习“前端免费学习笔记（深入）”；
- 检查是否写了
border-radius: 0 !important在全局或组件重置中 - Tailwind 用户注意：
rounded-full对应border-radius: 9999px，不是50%；真要圆形请用rounded-full+overflow-hidden组合 - Vue / React 中动态 class 拼接错误，比如
:class="['rounded-lg', isCircle && 'rounded-full']"会导致类名冲突
圆角不显示，八成不是 border-radius 写错了，而是裁剪机制没生效。盯住 overflow: hidden 和父容器尺寸，再查查有没有 transform 或 will-change 在暗地里破坏它。
