border-radius 直接作用于 <img> 即可生效，但需同时满足：宽高相等的固定值、避免父容器 overflow: hidden 截断、慎用 object-fit 导致视觉错觉、确保正方形尺寸才能实现正圆，且无需额外容器。
border-radius 直接加在 <img> 上就能生效，不需要父容器、不用 overflow: hidden、也不依赖 border 属性——现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+、Edge）默认裁剪图像内容。
为什么加了 border-radius 没反应？
不是 CSS 写错了，而是下面几个条件没同时满足：
-
width和height必须是相等的固定值（比如80px），不能只写width: 100%或height: auto；否则50%会按各自方向计算，变成椭圆 - 父容器设置了
overflow: hidden，但图片尺寸超出容器边界——圆角被物理截掉，看起来像“失效” - 用了
object-fit: cover，但原始图宽高比和容器不一致，此时圆角作用在容器框上，而图像内容被居中裁切，边缘可能刚好卡在圆角内侧，视觉上难察觉 - 在老版 Android WebView 或 Gmail/Outlook Web 等邮件客户端里，
object-fit被忽略，导致图片拉伸或留白，掩盖了圆角效果
border-radius: 50% 怎么才出正圆？
它只对正方形尺寸生效。关键不是“写 50% 就是圆”，而是“元素自身必须是正方形”：
- 显式设置等宽高：
width: 60px; height: 60px; border-radius: 50% - 用
aspect-ratio: 1 / 1（2026 年主流浏览器已稳定支持），配合width: 100%实现响应式正圆 - 原始图非正方形时，加
object-fit: cover强制等比覆盖并居中裁切 - 避免混用单位，比如
border-radius: 4px 50%，部分浏览器解析异常，尤其在 Flex/Grid 容器中
要不要套 <div> 容器？
多数情况不用，直接操作 <img> 更轻量、语义清晰、DOM 层级少：
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<img src="a.jpg" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block;"> - 只有两种场景才考虑套容器：需要兼容 IE9–，或要统一控制多个子元素（比如图标+文字+边框）
- 如果套了
<div>，必须加overflow: hidden，否则圆角只是“画了个形状”，图片照样溢出 - 注意：父容器若用了
transform或will-change，某些旧版 Chrome 下overflow: hidden可能失效，此时退回直接操作<img>更稳
最容易被忽略的是：圆角本身不占空间，但加上 border 或 box-shadow 后，若没设 box-sizing: border-box，实际尺寸会撑大，导致布局偏移或圆角错位。
