直接给加border-radius即可，无需overflow: hidden；常见问题包括：图片非正方形时50%呈椭圆、未设宽高导致百分比失效、border: transparent造成“无效果”错觉、语法错误致四角混乱。
直接给 <img> 元素加 border-radius 就行，不需要额外设 overflow: hidden，也不用碰过时的 border 属性。
为什么 border-radius 写了却没圆角？
最常踩的坑不是语法错，而是视觉误判：
- 图片宽高不等，
border-radius: 50%出来的是椭圆，不是正圆——不是失效，是按规则渲染 - 父容器设了
overflow: hidden，但自己没加border-radius，结果子图被硬裁成方块 -
<img>没设明确尺寸（比如只写width: 100%，高度靠内容撑），浏览器无法算出 50% 对应多少像素 - 用了
border: 1px solid transparent，看起来像没边框，其实border-radius已生效，只是不可见
border-radius 的值怎么写才不“飘”
单位、顺序、分隔符稍一错，四个角就乱套：
- 单值：
border-radius: 8px→ 四个角都是 8px 圆角 - 双值：
border-radius: 4px 12px→ 水平半径 4px，垂直半径 12px（所有角都按这个椭圆比例） - 四值：
border-radius: 4px 8px 12px 16px→ 顺时针：左上、右上、右下、左下 - 椭圆专用写法：
border-radius: 10px / 6px→ 斜杠分隔，前为横轴、后为纵轴（注意不是空格） - 百分比值基于元素自身宽高计算，
50%只有在正方形盒子里才是真圆
给 <img> 加圆角时，overflow: hidden 到底要不要？
绝大多数情况：不要。现代浏览器对 <img> 原生支持 border-radius 裁剪，直接生效：
- ✅ 推荐写法：
<img src="avatar.jpg" style="max-width:90%"> - ❌ 错误写法：
<img src="avatar.jpg" style="max-width:90%">——overflow: hidden对<img>标签无效（HTML 规范限制） - ⚠️ 唯一需要
overflow: hidden的场景：你把圆角逻辑放在父容器上，比如卡片组件中希望整个<div> 圆角并裁剪内部图片 —— 此时必须同时设 <code>border-radius和overflow: hidden在父级，且<img>自身不设圆角真正容易被忽略的点是：圆角会改变点击热区和阴影范围，但不会改变元素的盒模型尺寸（比如
getBoundingClientRect()返回的宽高不变），调试时别被 DevTools 的 layout 边框误导。
