用 border-radius 给图片加圆角需配合 css 实现：确保图片宽高相等再设 border-radius: 50% 才得正圆；搭配 object-fit: cover 防拉伸；兼容 ie 时可用 background-image 替代；注意移动端渲染差异及动画性能。
用 border-radius 给图片加圆角最直接
HTML 本身不处理样式，圆角必须靠 CSS 实现，核心就是 border-radius。它作用在 <img> 元素上即可，不需要额外包裹或 JS 干预。
常见错误是只写 border-radius: 50% 却忘了图片宽高不等 —— 这会导致椭圆而非正圆。真正要裁出圆形头像，得先确保图片是正方形（比如用 width 和 height 设为相等值），再加 border-radius: 50%。
-
border-radius: 10px：四个角统一设为 10 像素圆角 -
border-radius: 0 20px 0 20px：只右上、右下圆角（顺时针顺序） - 如果图片有边框或阴影，
border-radius会同时影响边框和阴影的形状
图片被拉伸变形？先检查 object-fit
给 <img> 设了固定宽高后，原始比例不对就会拉伸。这时候光调 border-radius 没用，得配合 object-fit 控制内容填充方式。
例如：width: 120px; height: 120px; border-radius: 50%; object-fit: cover; —— 这样既能裁出正圆，又不会压缩变形。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
object-fit: cover：等比缩放并裁剪，填满容器（推荐用于头像） -
object-fit: contain：等比缩放并完整显示，可能留白 -
object-fit在 IE 中不支持，如需兼容老浏览器，得用background-image替代<img>
用 background-image 实现更可控的圆角裁剪
当需要精确控制裁剪区域（比如只取图片中心一块再圆角），或者要叠加遮罩、渐变时，<img> 标签就不够灵活了，换成 div + background-image 更稳妥。
关键点在于：把圆角设在容器上，再用 background-size 和 background-position 调整图片显示位置。
- 容器设
border-radius: 50%，再设background-image: url(...) - 加上
background-size: cover和background-position: center保证居中裁切 - 注意路径问题：
background-image中的 URL 是相对于 CSS 文件位置，不是 HTML 文件
圆角在不同设备上显示不一致？留意渲染差异
移动端 Safari 对 border-radius 的抗锯齿处理较弱，小尺寸圆角（如 2px）可能看起来生硬；而某些安卓 WebView 会对 overflow: hidden 容器里的圆角图片做额外裁剪优化 —— 这些都不是 bug，而是渲染引擎特性。
实际能做的只有两点：一是避免用极小的像素值（1px 圆角基本不可靠），二是测试真机，别只信 Chrome DevTools 模拟器。
- 圆角数值尽量用偶数像素（
4px、8px），对 subpixel 渲染更友好 - 如果图片带透明背景（PNG），
border-radius依然生效，但要注意父容器是否设置了overflow: hidden - 动画圆角（
transition: border-radius 0.3s）在低端 Android 上可能卡顿，慎用
<img>，有人用 background-image，写法不统一很容易漏掉 object-fit 或 background-size。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
