border-radius直接加在img上失效，是因为它只定义角形状而不裁剪内容，需宽高严格相等且为固定值（如160px），不能用width:100%;height:auto;等响应式写法。
border-radius 直接加在 img 上为什么失效
因为 border-radius 只定义角的形状，不强制裁剪内容——它默认只影响边框和背景色，对图片原始像素无裁剪力。现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+、Edge）虽对 <img> 元素原生支持内容裁剪，但前提是：宽高必须数值相等且为固定值（如 width: 160px; height: 160px;），不能是 width: 100%; height: auto; 或 max-width: 100%; 这类响应式写法。
常见错误现象：
- 写了
border-radius: 50%，图片仍是方的 → 实际是图片溢出未被裁，而非样式没生效 - 写了
border-radius: 50%，结果是椭圆 → 宽高不等，50%分别按宽度和高度算半径，必然拉成椭圆 - 用
object-fit: cover却仍变形 → 没配等宽高等尺寸，cover只能居中裁切，无法补救比例失衡
flex 布局下图片圆角画廊的关键约束
用 display: flex 排列图片时，border-radius 要生效，必须确保每个子项（即 <img>）自身满足正方形显示条件，而不是依赖父容器撑开或拉伸。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 给每个
<img>显式设置相等的width和height（如180px），禁用height: auto - 必须加
object-fit: cover：非正方形原图才能居中裁切，避免横向/纵向拉伸 - 加
display: block：消除<img>默认 inline 行为带来的底部小间隙 - 父容器用
flex-wrap: wrap+gap控制间距，不要靠margin—— 否则圆角边缘可能被挤破
示例（单张图样式）：
<img src="photo1.jpg" style="width: 180px; height: 180px; border-radius: 50%; object-fit: cover; display: block;">
响应式圆角画廊怎么写才不崩
纯 width: 100% + border-radius: 50% 在 flex 容器里大概率失效，因为子项高度随内容浮动，50% 失去参照基准。
可靠方案分两种场景：
- 固定列数（如每行 3 张）：用
aspect-ratio: 1 / 1（现代浏览器支持），配合width: calc((100% - 2 * gap) / 3)，再设border-radius: 50%和object-fit: cover - 兼容旧环境（如 iOS 14.5 以下、部分邮件客户端）：放弃响应式，提前把所有图片裁成正方形（如 300×300），再用固定尺寸 +
border-radius: 50% - 绝对不推荐：
padding-bottom: 100%+height: 0套 div 容器——flex 下该技巧易与align-items冲突，且增加 DOM 层级
为什么套一层 div 容器反而更麻烦
有人习惯用 <div class="circle"><img></div>，再给 div 设 border-radius: 50% 和 overflow: hidden。这看似稳妥，但在 flex 画廊里容易踩坑：
- div 默认
display: block，flex 子项需额外设flex: 0 0 auto防止被拉伸 - 若父容器用了
transform或will-change，旧版 Chrome（≤90）会让overflow: hidden失效，图片照常溢出 - 多一层嵌套就多一重盒模型计算，
gap和border容易错位，调试成本翻倍 - 邮件场景（Gmail/Outlook）根本无视
object-fit，此时 div 容器方案也救不了，唯一解仍是预处理正方形图
真正省心的做法：直接操作 <img>，守住宽高相等、object-fit: cover、display: block 三要素，其余交给 flex 自己排。
