border-radius是唯一靠谱方案，必须同时满足：width和height数值相等、显式设置border-radius:50%、配合object-fit:cover及display:block，否则仅显示圆角边框而非真圆裁剪。

border-radius 是唯一靠谱的方案，别碰 img 的 border 属性，也别用废弃的 border="1" 写法。它不控制边框粗细，只定义“可视区域边界形状”，是否真正裁剪内容，取决于尺寸、容器和渲染环境。

为什么加了 border-radius: 50% 图片还是方的或椭圆？

根本不是 CSS 写错了，而是浏览器没裁——border-radius 本身不强制隐藏溢出内容。必须同时满足：

• width 和 height 数值相等（如 width: 120px; height: 120px;），不能是 width: 100%; height: auto;
• 若作用于 自身：现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+、Edge）默认裁剪，但旧版 Safari 或 Android WebView 可能失效
• 若作用于父容器（如
  ）：必须显式写 overflow: hidden，否则图片照常溢出
• 非正方形原图（如 600×400）直接套 border-radius: 50%，结果一定是椭圆——因为百分比按宽高分别计算

怎么让 真正变圆？三步写死

优先直接作用于 ，最简可控：

• 设固定宽高：width: 80px; height: 80px;（不能用百分比或 auto）
• 加圆角：border-radius: 50%;
• 防拉伸/留白：object-fit: cover; + display: block;（避免行内元素默认下边距）

完整示例：


CSS工具箱(专业版)
全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
下载

邮件里怎么安全实现圆形头像？

Gmail、Outlook Web 会剥离 块，object-fit 也被忽略，唯一可靠路径是：

• 提前把图片处理成正方形（如 200×200 像素）
• 用 HTML 属性 width="200"（比 style="width:200px" 更稳）
• 内联写 style="border-radius: 50%;"

示例：

复杂点在于：圆不是靠一个属性画出来的，而是靠“正方形尺寸 + 圆角声明 + 裁剪机制”三者咬合。漏掉任一环，就只是个带弧度的边框，不是真圆。