直接给<img>加border-radius: 50%即可实现真圆，但需满足width和height为相等固定值、配合object-fit: cover防拉伸，现代浏览器原生支持，无需父容器或overflow: hidden。
直接给 <img> 加 border-radius 就行，不需要父容器、不用 border 属性、不依赖 overflow: hidden ——现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+、Edge）对 <img> 元素默认裁剪内容，只要宽高相等且值明确，border-radius: 50% 就能出真圆。
为什么只写 border-radius: 50% 图片还是方的？
不是 CSS 写错了，是条件没凑齐：
-
width和height必须是相等的**固定值**（如120px），不能是width: 100%+height: auto—— 否则浏览器按各自方向算半径，结果是椭圆 - 如果用响应式尺寸（比如
max-width: 100%），必须同步设height: auto或配合aspect-ratio: 1 / 1（现代浏览器支持良好） - 原始图不是正方形？加
object-fit: cover强制居中裁剪，否则会拉伸或留白 - 旧版 Android WebView 或某些邮件客户端（Gmail、Outlook Web）可能忽略
object-fit，这时唯一可靠方式是提前把图片处理成正方形再引用
给 <img> 直接加圆角 vs 套一层 <div> 容器
优先直接作用于 <img>，更轻量、少一层 DOM、语义清晰：
- 推荐写法：
<img src="a.jpg" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block;"> - 套
<div>的场景：需要兼容 IE9– 或老 Android；或要复用同一套圆角逻辑控制多个子元素（比如图标+文字） - 套容器时务必加
overflow: hidden，否则圆角只是“画了个圈”，图片照样溢出 - 注意：如果父容器用了
transform或will-change，某些旧版 Chrome 下overflow: hidden可能失效，此时退回直接操作<img>更稳
border-radius 的值怎么填才不出错？
别被“百分比看起来高级”带偏，单位和顺序直接影响效果：
立即学习“前端免费学习笔记（深入）”；
- 单值（
border-radius: 4px）：四角统一，最常用，适合卡片图、头像边框 - 双值（
border-radius: 4px 8px）：第一个是水平半径，第二个是垂直半径，适合做椭圆角（比如胶囊按钮） - 四值（
border-radius: 4px 8px 12px 16px）：顺时针依次为左上、右上、右下、左下，精细控制时用 - 百分比（
border-radius: 50%）：只在宽高相等时才是正圆；长图上会变椭圆，这不是 bug，是规范行为 - 避免混用单位（如
border-radius: 4px 50%），部分浏览器解析不一致，尤其在 flex/grid 容器里容易失准
最容易被忽略的一点：圆角本身不消耗空间，但加了 border 或 box-shadow 后，若没设 box-sizing: border-box，容器实际尺寸会撑大，导致布局错位。尤其是用 border-radius 做圆形头像再加细边框时，这个细节几乎必踩。
