border-radius 是实现圆角的通用 css 属性，适用于 img 等任意元素；需配合 object-fit 控制图片比例、overflow: hidden 兜底裁剪，并注意高清屏像素对齐。
用 border-radius 直接切圆角，不是“圆角矩形”专用属性
HTML 本身没有“圆角矩形图片”的独立标签或属性，所有圆角效果都靠 CSS 的 border-radius 实现。它作用于任意块级或替换元素（比如 <img>），只要该元素有盒模型边界（即默认或显式设置了 display）就能生效。
常见错误是给 <img> 加了 border-radius 却没反应——大概率是因为父容器溢出被裁剪、或图片被拉伸变形导致圆角“看不见”。
-
border-radius: 8px：四个角统一 8px 圆角（最常用） -
border-radius: 50%：等宽高等比时才是正圆；若宽高不等，结果是椭圆边框（不是真圆形裁剪） - 想只切左上和右下：用
border-radius: 12px 0 12px 0（顺时针：top-left, top-right, bottom-right, bottom-left）
图片变形导致圆角失效？先 fix object-fit
直接设 border-radius 后发现边缘还是直的，往往因为图片被拉伸填满容器，原始比例丢失，圆角被“撑开”或裁掉。这时候不能只调 border-radius，得配合 object-fit 控制内容渲染方式。
- 保持比例并居中显示：加
style="object-fit: cover;"（常用于头像、卡片图） - 完整显示不裁剪：用
object-fit: contain;（留白但形状准确） - 别忘了设容器宽高：否则
object-fit不生效；例如width: 200px; height: 200px; - 旧版 Safari 需要
-webkit-object-fit前缀（iOS 14.5 之前）
父容器 overflow: hidden 是安全兜底项
某些情况下，即使设了 border-radius，图片边缘仍可能“破框”——尤其是用了 transform、绝对定位或外部库动态插入图片时。这时单纯靠图片自身样式不够稳。
- 把图片包一层
<div>，给这个 <code>div设border-radius和overflow: hidden - 例如：
<div style="border-radius: 12px; overflow: hidden; width: 160px; height: 160px;"> <img src="avatar.jpg" style="max-width:90%"> </div>
-
overflow: hidden强制裁剪子元素超出部分，比单靠border-radius更可靠，尤其在动画或响应式场景下 - 避免用奇数小值如
border-radius: 1px或3px做精细控制；优先用2px、4px、8px - 确保图片原始尺寸是目标显示尺寸的整数倍（比如显示 100×100，就提供 200×200 图片 +
image-rendering: -webkit-optimize-contrast;） - 极少数情况需强制清晰渲染：加
image-rendering: crisp-edges;（但会牺牲平滑度，慎用）
高清屏/Retina 下圆角发虚？注意像素对齐
在 2x 屏幕上，border-radius: 1px 渲染成物理 2px，但若容器尺寸不是偶数，可能导致抗锯齿模糊。这不是 bug，是亚像素渲染的自然结果。
overflow: hidden 或忽略 object-fit，很容易让 border-radius 成为摆设。
