要使 border-radius 正确裁剪图片，必须同时设置 overflow: hidden；推荐将 border-radius 和 overflow: hidden 加在包裹容器上，并用 object-fit: cover 控制图片缩放适配。
border-radius 怎么设才不会切掉图片内容
直接给 img 元素加 border-radius 有时会发现圆角没生效，或者图片边缘被“裁掉一块”——这不是 bug，是浏览器默认的 overflow 行为在起作用。
- 图片本身没有内置裁剪机制，
border-radius只影响盒子的**渲染轮廓**，不自动触发裁剪 - 必须显式设置
overflow: hidden才能按圆角裁掉超出部分 - 如果父容器有
padding或border，而你只给img加圆角，那圆角效果实际发生在子元素上，容易错位 - 推荐写法：
.avatar {<br> width: 100px;<br> height: 100px;<br> border-radius: 50%;<br> overflow: hidden;<br>}<br>.avatar img {<br> display: block;<br> width: 100%;<br> height: 100%;<br> object-fit: cover;<br>}
用 object-fit 控制图片如何适应圆形容器
就算加了 border-radius 和 overflow: hidden，图片拉伸变形、居中偏移、关键内容被裁掉的问题依然常见——根源在于图片原始宽高比和容器不匹配。
-
object-fit: cover最常用：等比缩放填满容器，多余部分裁掉（适合头像、卡片图） -
object-fit: contain保持完整，但可能留白（适合图标、需要全貌的示意图） - 别用
object-fit: fill，它会强行拉伸破坏比例 - 注意：
object-fit对img有效，但对背景图要用background-size
边框（border）加在哪儿才不破坏圆角视觉
给带圆角的图片加边框，很容易发现边框“凸出来”或圆角变钝——这是因为 border 默认画在盒模型的 border-box 边界上，而 border-radius 是作用在 border box 的角上。一旦边框太粗，就会撑开视觉圆角感。
- 边框必须加在**同一个元素**上：要么都加在
img上，要么都加在包裹容器（如.avatar）上，混用必出问题 - 如果边框加在容器上，记得把
border-radius和overflow: hidden也放在同一层 - 边框宽度会影响最终圆角半径的视觉表现，比如
border-radius: 12px+border: 4px solid #ccc，实际圆角“柔和度”会弱于无边框时 - 替代方案：用
box-shadow模拟边框（box-shadow: 0 0 0 4px #ccc），它不参与盒模型计算，不影响圆角精度
IE 和旧版 Safari 下 border-radius 不生效怎么办
不是所有老浏览器都支持 img 直接圆角裁剪。IE 完全不支持 border-radius 裁剪图片内容；Safari overflow: hidden + border-radius 组合的支持也不稳定。
立即学习“前端免费学习笔记（深入）”；
- 兼容性兜底方案：用
background-image替代img标签，配合background-size和background-position - 对应 CSS：
.avatar {<br> width: 100px;<br> height: 100px;<br> border-radius: 50%;<br> background-image: url("avatar.jpg");<br> background-size: cover;<br> background-position: center;<br>} - 注意：这样就失去了
img的语义化和 alt 文本能力，需权衡可访问性需求 - 现代项目若已放弃 IE，这条基本可跳过；但若要支持 iOS 8 或 Android 4.4 WebView，仍需验证
overflow: hidden、object-fit 和 border 的层级关系是否一致、以及老环境里要不要退回到背景图方案——这些细节一错，整个视觉就“僵”了。 
