直接给设border-radius即可实现圆角，无需overflow: hidden；仅当父容器需独立控制圆角范围（如卡片组件）时才需二者配合。
border-radius 本身就能让图片变圆角，不需要 overflow
直接给 <img> 元素设置 border-radius 即可生效，浏览器原生支持。很多人误以为必须套一层容器加 overflow: hidden，其实那是为了解决「边框溢出」或「子元素不裁剪」的特定问题，不是圆角图片的必要步骤。
常见错误现象：border-radius 设了但没效果——大概率是图片被父容器约束（比如 Flex/Grid 中的默认对齐行为），或父级设置了 overflow: hidden 却忘了给父级加圆角，导致视觉上仍是直角。
- 纯图片场景：直接写
img { border-radius: 12px; }，立刻生效 - 带边框时注意：
border会参与圆角渲染，如果边框太粗，圆角可能显得“被压扁”，建议用box-sizing: border-box确保尺寸可控 - 想实现「正圆头像」：用
border-radius: 50%，并确保宽高等比（如width: 100px; height: 100px;或仅设width: 100px; aspect-ratio: 1;）
什么时候必须加 overflow: hidden？
只有当图片作为子元素、且父容器需要独立控制圆角范围时，才需要 overflow: hidden。典型场景是：图片由 JS 动态插入、或需响应式缩放、或父容器本身有背景/阴影/描边等装饰。
例如卡片组件中，希望整个卡片圆角，内部图片随卡片缩放但不撑破边界——这时圆角逻辑在父级，图片自身不设 border-radius，靠父级 overflow: hidden 裁剪。
- 父容器必须同时设置
border-radius和overflow: hidden，缺一不可 - 若父容器用了
transform或will-change，某些旧版 Chrome 可能触发裁剪失效，可加backface-visibility: hidden强制重建层叠上下文 - 慎用在
position: fixed或position: sticky元素上：Safari 对这类定位 +overflow: hidden的组合支持不稳定，可能出现滚动时圆角闪烁
border-radius 值写法差异影响最终形状
border-radius 支持单值、双值、四值甚至八值写法，不同写法直接决定四个角是否一致、水平垂直半径是否分离。
- 单值如
border-radius: 8px：四个角都是 8px 圆角 - 双值如
border-radius: 8px 16px：表示「水平半径 垂直半径」，即所有角水平方向 8px、垂直方向 16px（椭圆角） - 四值如
border-radius: 4px 8px 12px 16px：顺时针对应左上、右上、右下、左下 - 想单独调某个角？用
border-top-left-radius等独立属性，比四值写法更易维护
移动端真机调试容易忽略的坑
iOS Safari 和部分安卓 WebView 对 border-radius + 图片的渲染有隐藏限制：当图片通过 object-fit 缩放、且容器未显式声明 height 时，圆角可能在滚动后消失或错位。
- 解决方案：给图片容器加
min-height: 0（修复 flex 容器高度塌陷）或显式设height - 避免用
%值配object-fit: cover在未知宽高的容器里——iOS 会把圆角半径按初始渲染尺寸计算，后续 resize 不重绘 - 如果用了
image-rendering: -webkit-optimize-contrast等优化，部分老 iOS 版本会禁用圆角抗锯齿，看起来发虚，可改用image-rendering: crisp-edges或干脆移除
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
