直接给<img>加border-radius即可生效，无需额外标签或JS；它真实裁剪图像渲染区域，但需确保宽高等比（如width:80px;height:80px）或用aspect-ratio:1/1配合50%实现正圆，避免父容器overflow:hidden意外截断。
直接用 border-radius 就行，不需要额外标签或 JS，但要注意图片是否被父容器裁剪、是否影响点击区域、以及在内联图片和响应式场景下的行为差异。
border-radius 用在 img 标签上就生效
绝大多数情况下，给 <img> 元素本身加 border-radius 是最直接有效的方式。它不是“装饰层”，而是真实裁剪图像渲染区域。
- 必须配合
overflow: visible（默认就是）才能看到圆角效果；如果父元素设了overflow: hidden，会意外遮掉圆角 - 值可以是单个长度（如
12px）、百分比（如50%做圆形头像）、或四个值分别控制（如8px 16px 0 4px） - 注意：IE9+ 支持，IE8 及更早版本完全不支持，且无优雅降级方案
为什么有时加了 border-radius 没反应？
常见原因不是语法错，而是布局上下文干扰：
-
<img>被包裹在<a>或<div>中，而该父容器设置了overflow: hidden—— 圆角会被截掉 - 图片是内联元素（
display: inline），而border-radius对内联元素的 corner 区域不生效（实际仍起作用，但常因 line-height 或 vertical-align 导致视觉错位） - 使用了
object-fit: cover且图片宽高比与容器不一致，此时圆角作用于容器边界，而非图像内容本身 —— 看起来像“没圆”
做圆形头像时，50% 不一定等于正圆
border-radius: 50% 的计算基准是元素自身的宽高，不是视口或父容器。所以只有当 width == height 时才是正圆。
立即学习“前端免费学习笔记（深入）”；
- 响应式场景下，若只设
width: 100%未固定height，高度由图片原始比例撑开，50%就会变成椭圆 - 稳妥做法：显式设置等宽高等尺寸，例如
width: 80px; height: 80px; border-radius: 50% - 或者用
aspect-ratio: 1 / 1（现代浏览器支持）配合border-radius: 50%，更灵活
需要兼容老浏览器或特殊裁剪逻辑？
纯 CSS 圆角在 IE8 或某些嵌入式 WebView（如旧版微信内置浏览器）中不可用，这时得换思路：
- 服务端生成带圆角的 PNG（带透明背景），前端用普通
<img>引入 —— 最兼容，但失去响应式缩放灵活性 - 用 SVG
<clipPath>包裹<image>，再通过 CSS 控制尺寸 —— 兼容性略好于border-radius，但代码量翻倍且不能直接用在普通<img>上 - 避免用 JS 计算裁剪（如 canvas 绘图），除非你明确需要运行时动态处理 —— 性能差、SEO 不友好、首屏延迟明显
真正容易被忽略的是：圆角本身不改变图片的可访问性尺寸或点击热区，但若用 transform: scale() 或 clip-path 配合动画，可能触发重绘/重排问题，尤其在低端安卓设备上滑动卡顿明显。
