真圆需宽高相等、border-radius: 50%、object-fit: cover、display: block四者缺一不可；否则因宽高不等或拉伸变形导致椭圆或失真。

直接用 border + border-radius: 50% 就能做出带边框的圆形图片，但前提是图片显示区域必须是正方形——否则虚线或实线边框都会变成椭圆，不是真圆。

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

根本原因不是 CSS 写错了，而是 width 和 height 不相等，或者用了响应式值（比如 width: 100% + height: auto）导致浏览器按各自方向算半径。

• border-radius: 50% 的含义是「水平方向取宽度的 50%，垂直方向取高度的 50%」——长图宽高不等，结果必然是椭圆
• 哪怕只设 width: 200px 没设 height，浏览器也会按默认 height: auto 计算，照样出椭圆
• 用 max-width: 100% 时，必须同步加 aspect-ratio: 1 / 1（现代浏览器支持），否则失效

怎么确保边框是正圆且不拉伸图片？

关键在于控制「显示区域」为正方形，并让图片在里面居中裁切，而不是拉伸填满。

• 给 <img> 同时设置相等的 width 和 height（如 width: 120px; height: 120px;）
• 必须加 object-fit: cover：否则原始图是矩形时会被横向或纵向拉伸变形
• 加 display: block：避免 <img> 默认 inline 行为带来的底部小间隙
• 边框本身用 border: 3px solid #333 或 border: 2px dashed #999，再叠 border-radius: 50%

示例代码：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

@@##@@

border-radius 与父容器 overflow: hidden 的关系

现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+、Edge）对 <img src="avatar.jpg" style="max-width:90%"> 元素原生支持内容裁剪，所以 border-radius: 50% 直接写在 img 上就能生效，不需要父容器干预。

• 如果套了 <div> 容器并给它设 <code>border-radius，就必须加 overflow: hidden，否则图片会溢出圆角区域
• 某些旧版 Android WebView 或 Gmail 邮件客户端不支持 object-fit，此时唯一可靠方式是提前把图片处理成正方形再引用
• 父容器若用了 transform 或 will-change，部分旧 Chrome 版本会让 overflow: hidden 失效，退回直接操作 img 更稳

虚线边框（dashed）兼容性要注意什么？

border: 2px dashed #666 在所有现代浏览器都支持良好，但 IE9 及以下会降级为实线——这不是 bug，是规范行为。

• IE10+ 支持 dashed，可放心用
• 如需兼容 IE9–，不能依赖 CSS 虚线，得改用 SVG 圆环或背景图模拟
• 虚线边框视觉单薄时，可加 padding: 6px 让虚线离图片稍远，再用 background: #fff 防透底
• 别混用单位，比如 border-radius: 4px 50%，部分浏览器解析不一致，尤其在 flex/grid 容器里容易错位

最常被忽略的一点：圆角本身不占空间，但加了 border 或 box-shadow 后，若没设 box-sizing: border-box，容器实际尺寸会撑大，导致布局偏移。