border-radius: 50% 不生效的主因是元素宽高不等、缺少 overflow: hidden 或图片拉伸变形；需确保正方形尺寸、隐藏溢出、合理设置 object-fit 或 background-size。

border-radius: 50% 不生效的常见原因

直接写 border-radius: 50% 却没变圆？大概率是元素本身不是正方形。CSS 圆形裁剪只对宽高相等的盒模型可靠生效，否则会变成椭圆甚至完全看不出效果。

• 检查 width 和 height 是否相等（比如都设为 80px，而不是 width: 80px; height: auto）
• 图片本身被拉伸：用 object-fit: cover 配合固定尺寸容器，避免图片变形又撑开盒子
• 父容器有 overflow: hidden 缺失——圆形裁剪必须配合隐藏溢出，否则圆角只是“视觉圆”，边缘仍可见

Bootstrap 5 中正确用法（不依赖自定义类）

Bootstrap 5 自带 .rounded-circle，但它的行为和手写 border-radius: 50% 一致，**不自动处理宽高比或 overflow**。别指望加个 class 就万事大吉。

• 必须显式设置等宽高等尺寸：
• 若用响应式单位（如 rem 或 %），确保父容器约束了宽高比，例如用 aspect-ratio: 1（注意兼容性）
• 在 Bootstrap 的 .card-img 或 .avatar 等自定义组件里，常漏掉 overflow: hidden ——需手动补上

img 标签 vs background-image 实现差异

用 标签最直观，但灵活性低；用背景图更可控，尤其适配响应式头像或需要叠加图标/状态徽章的场景。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• ：必须配 object-fit: cover + 固定宽高 + border-radius: 50% + 父容器 overflow: hidden
• 背景图方案：background-image: url(...); border-radius: 50%; background-size: cover; background-position: center;，此时只需容器本身是正方形且 overflow: hidden
• 注意：背景图无法被屏幕阅读器识别，纯展示型头像可接受；含用户信息的头像建议优先用 并加 alt

移动端或高清屏下边缘发虚怎么办

部分设备（尤其是 iOS Safari）对非整数像素的 border-radius 渲染模糊，50% 在小尺寸（如 24px）上可能显示为“毛边圆”。

• 优先使用偶数像素值：比如 width: 40px; height: 40px;，避免 39.5px 这类计算结果
• 必要时加 transform: translateZ(0) 或 will-change: transform 强制 GPU 渲染（慎用，可能引发其他重绘问题）
• 不要用 border-radius: 50.1% 或 999px 这类“取巧”写法——它在缩放或 DPR > 1 时反而更容易露馅

实际项目里最常卡住的，不是不会写 border-radius: 50%，而是忘了它只负责“切角”，不负责“塑形”和“遮罩”。宽高、溢出、图片填充方式，三者缺一不可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！