标签上border-radius没效果，因它是行内元素且旧版safari/android webview渲染不一致；父容器overflow: hidden裁剪或图片宽高不等（如设border-radius: 50%但非正方形）也会导致失效。
border-radius 直接加在 img 标签上为什么没效果？
因为 <img> 默认是行内元素，且部分浏览器（尤其是旧版 Safari 和某些 Android WebView）对行内元素的 border-radius 渲染不一致；更关键的是，如果图片父容器有溢出裁剪（比如设置了 overflow: hidden），但图片本身被拉伸变形或尺寸超出容器，border-radius 就会“失效”——实际是圆角被裁掉了，而非没生效。
实操建议：
- 确保
<img>是块级或行内块：display: block或display: inline-block - 给图片设明确宽高，或用
object-fit: cover配合容器约束尺寸 - 避免父容器同时设
overflow: hidden+ 未约束的图片尺寸，否则圆角会被硬裁 - 不要依赖
img自身的width/height属性，优先用 CSS 控制
如何让头像类图片真正显示为正圆？
正圆 ≠ 单纯设 border-radius: 50%，它只在宽高等比时才成立。一旦图片宽高不一致（比如 300×200 的图设成 100×100 容器），50% 会生成椭圆。
实操建议：
- 容器必须是正方形：
width: 100px; height: 100px - 图片设
width: 100%; height: 100%; object-fit: cover，保证填满且不拉伸 - 圆角直接写
border-radius: 50%（不是px值，百分比才随容器自适应） - 若需兼容 IE9–11，可加
-webkit-border-radius: 50%，但注意 IE 不支持object-fit，得用背景图方案替代
border-radius 在不同场景下的参数差异
border-radius 支持单值、双值、四值写法，影响四个角的独立控制能力，不是所有情况都适合写 50%。
常见组合：
-
border-radius: 8px：四个角统一 8px 圆角 -
border-radius: 8px 16px：左上/右下为 8px，右上/左下为 16px（水平/垂直两组） -
border-radius: 4px 8px 12px 16px：顺时针：左上、右上、右下、左下 -
border-radius: 50% / 25%：椭圆弧度（横轴半径 / 纵轴半径），可用于非正方形容器的“软化”圆角
注意：border-radius 不能为负值，且当值超过宽高一半时，等效于 50%（即最大圆角）。
使用 background-image 替代 img 标签的圆角更稳吗？
是的，在复杂布局或需要精确控制裁剪时，用 div + background-image 更可靠，尤其规避了 <img> 的加载闪烁、替换失败、SEO 干扰等问题。
实操建议：
- 容器设固定宽高 +
border-radius+background-size: cover+background-position: center - 用
background-image: url(...)加载图片，避免<img>的 intrinsic size 干扰 - 如需响应式，可配合
aspect-ratio（现代浏览器）或 padding-bottom 技巧维持宽高比 - 缺点：无法原生设置
alt文本，SEO 和无障碍需额外处理（如aria-label）
圆角这事，表面是 CSS 属性，背后其实是尺寸控制、渲染层级和浏览器行为的综合结果。最容易被忽略的，是忘记检查图片是否真的“装进”了带圆角的容器里——而不是靠 border-radius 自己“猜”。
