img标签上border-radius无效是因为其默认为inline元素，而该属性仅对块级或inline-block元素可靠生效；需设display:block/inline-block并确保父容器无干扰overflow设置。
border-radius 直接写在 img 标签上为什么没效果？
因为 <img> 默认是行内元素（inline），而 border-radius 对行内元素的圆角裁剪行为不可靠——浏览器通常只对块级或 inline-block 元素生效。更常见的情况是图片被父容器限制了 overflow，但自身没触发渲染层叠上下文，导致圆角“看不见”。
实操建议：
- 给
<img>加display: block或display: inline-block - 确保图片没有被父容器设置
overflow: hidden以外的其他遮罩（比如 transform 层叠问题） - 避免用
background-image方式加载图片后又想靠border-radius裁剪——它只裁剪元素盒模型，不裁剪背景图本身
用 CSS 类统一控制圆角，但不同尺寸图片圆角不协调怎么办？
固定写死 border-radius: 10px 在小图上显得太钝，在大图上又像没加一样。真正可控的方式是用相对单位或逻辑值。
实操建议：
- 优先用
border-radius: 50%实现正圆头像——前提是宽高等比且设为正方形 - 响应式场景下改用
border-radius: calc(1rem * 0.6)或基于视口的border-radius: 2vmin - 如果必须适配不规则图，可配合
object-fit: cover+ 容器固定宽高，再对容器设border-radius（比直接作用于<img>更稳定）
border-radius 在 Safari 上失效或锯齿严重？
Safari（尤其是旧版 iOS）对 border-radius + 图片组合的硬件加速支持较弱，常表现为圆角被截断、边缘发虚，甚至整个图片消失。
实操建议：
- 强制触发 GPU 加速：给图片加
transform: translateZ(0)或will-change: transform - 避免和
filter（如 drop-shadow）同时使用——Safari 会丢弃圆角渲染 - 测试时务必在真机 iOS Safari 下验证，模拟器有时不复现
- 极端兼容需求下，可用
clip-path: circle(50% at 50% 50%)替代（注意 IE 不支持）
如何让圆角图片带描边且不破坏圆角形状？
直接加 border: 2px solid #333 是最简方式，但要注意 border 会撑开盒子、影响布局；若用 outline，则不占空间但无法单独控制圆角。
实操建议：
- 用
box-sizing: border-box让 border 包含在宽高中，避免意外溢出 - 需要阴影+描边共存时，用
box-shadow: 0 0 0 2px #333模拟描边——它完全跟随border-radius走形 - 若描边需 hover 变化，推荐用
outline+outline-offset，但要加outline: none清除默认焦点样式
圆角看似简单，实际在混合布局、跨端渲染、动态尺寸场景下，border-radius 的表现高度依赖元素 display 类型、父容器 overflow 设置、以及是否触发了独立渲染层——这些细节不显眼，但一漏就白调。
