border-radius: 50% 本身不保证出圆，仅当元素宽高严格相等、display设为block或vertical-align修正基线、配合object-fit: cover与object-position: center时，才能实现真正居中裁切的正圆形头像。

直接给 img 加 border-radius: 50% 不一定出圆——它只在宽高相等时才真正变圆，否则是椭圆；头像“不圆”的本质问题，从来不是属性写错，而是尺寸、盒模型或内容定位没控住。

border-radius: 50% 为什么有时还是椭圆？

浏览器按当前元素的 width 和 height 分别计算水平/垂直方向的圆角半径：50% 意味着「宽度的一半」和「高度的一半」。如果 width: 100px、height: 80px，结果就是 50px × 40px 的椭圆。

• 必须显式设置相等的 width 和 height（如都为 64px），不能一个用 auto 或 100%
• 避免靠 padding-top hack 或父容器 flex 挤出“视觉正方形”——border-radius 只认盒模型真实尺寸
• 响应式场景优先用 aspect-ratio: 1 替代固定像素，但注意 Safari 15.4+ 才完全支持

img 标签加 border-radius 没效果？检查 display 和 overflow

img 默认是 inline 元素，行内对齐会引入底部空白（基线间隙），导致实际渲染高度略大于设定值，border-radius 裁切区域偏移，看起来“没圆”。

• 给 img 加 display: block 或 vertical-align: top 消除基线干扰
• 确保父容器有 overflow: hidden，否则超出圆区域的内容会溢出（尤其用 object-fit: cover 时）
• 别用 line-height: 0 或负 margin 强行压高度——这是治标不治本，且易破坏布局流

怎么让非正方形原图也居中裁出圆形人脸？

border-radius 只负责“裁边”，不管“裁哪”。原图宽高比 ≠ 容器宽高比时，必须靠缩放和定位控制焦点。

Kibana Saved Objects

通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。

下载

• 用 object-fit: cover（推荐）让图片等比缩放并填满容器，多余部分裁掉
• 显式加 object-position: center，避免某些浏览器默认偏上（尤其竖构图原图）
• 如果用背景图方式：background-size: cover + background-position: 50% 50% + background-repeat: no-repeat
• 语义化要求高时别用背景图——img 支持 alt、懒加载、srcset，背景图全丢

小尺寸头像（≤32px）边缘发虚怎么办？

这不是 CSS 写错了，是像素对齐问题：小尺寸下抗锯齿算法在非整数像素边界渲染模糊，尤其在 Retina 或 Windows 高缩放屏上明显。

• 头像尺寸尽量用偶数像素（如 24px、32px），避开 23.5px 这类半像素
• 可尝试 image-rendering: -webkit-optimize-contrast 或 image-rendering: crisp-edges 强制像素级渲染（兼容性有限）
• 高分辨率设备建议提供 2x 图源（srcset），否则缩放后模糊更严重

真正难的不是画圆，而是让圆里刚好露出人脸——尺寸、缩放、定位三者缺一不可，漏掉任意一环，border-radius: 50% 就只是个好看的空壳。

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