border-radius: 50% 显示椭圆的根本原因是元素宽高不相等，浏览器分别按宽度和高度的50%计算圆角半径；必须显式设置相等的width和height、配合display: block或vertical-align修正基线、overflow: hidden裁剪，并用object-fit: cover与object-position: center确保内容居中。
直接给 img 加 border-radius: 50% 不一定出圆——它只在宽高严格相等、display 和 overflow 配合到位时才真正生效。
为什么 border-radius: 50% 有时还是椭圆？
浏览器按当前元素的 width 和 height 分别计算水平/垂直方向的圆角半径：50% 意味着「宽度的一半」和「高度的一半」。如果 width: 100px、height: 80px，结果就是 50px × 40px 的椭圆。
- 必须显式设置相等的
width和height（如都为64px），不能一个用auto或100% - 避免靠
padding-tophack 或父容器flex挤出“视觉正方形”——border-radius只认盒模型真实尺寸 - 响应式场景优先用
aspect-ratio: 1替代固定像素，但注意 Safari 15.4+ 才完全支持
img 标签加 border-radius 没效果？检查 display 和 overflow
img 默认是 inline 元素，行内对齐会引入底部空白（基线间隙），导致实际渲染高度略大于设定值，border-radius 裁切区域偏移，看起来“没圆”。
Kibana Saved Objects
下载
通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。
- 给
img加display: block或vertical-align: top消除基线干扰 - 确保父容器或
img自身有overflow: hidden，否则超出圆区域的内容会溢出（尤其用object-fit: cover时） - 别用
line-height: 0或负margin强行压高度——这是治标不治本，且易破坏布局流
非正方形原图怎么居中裁出圆形人脸？
border-radius 只负责“裁边”，不管“裁哪”。原图宽高比 ≠ 容器宽高比时，必须靠缩放和定位控制焦点。
立即学习“前端免费学习笔记（深入）”；
- 必须配
object-fit: cover+object-position: center，否则图片会拉伸、偏移或留白 - 若无法改 HTML（如 CMS 模板），可用
background-image方式绕过：background-size: cover+background-position: center+background-repeat: no-repeat -
clip-path: circle(50% at 50% 50%)是替代方案，但旧版 Safari 和 Android Webview 兼容性弱，降级需 fallback 到border-radius
最常被忽略的是：圆角是否“可见”，取决于 overflow: hidden 是否和 border-radius 在同一元素上；很多人把 overflow 写在父容器，结果子元素圆角依然溢出。
