头像加 rounded-full 仍为方形，因该类仅设圆角不控制尺寸、不裁剪内容；需配合等宽高（如 w-12 h-12）、overflow-hidden（同元素）及 img 上的 object-cover 才生效。
为什么只加 rounded-full 头像还是方的
因为 rounded-full 只设了 border-radius: 9999px，它不控制尺寸、不裁剪内容、也不缩放图片。光加这个类，就像给盒子画了个圆边框，但里面的内容照常溢出或拉伸。
- 必须搭配等宽高等尺寸类，比如
w-12 h-12（不能是w-12 h-10） -
overflow-hidden必须和rounded-full加在同一个元素上——常见错误是父 div 加overflow-hidden、img加rounded-full，两者不同层，裁剪无效 -
object-cover必须加在img上，否则默认object-fit: fill会拉伸变形，破坏圆形边界 - 响应式写法如
sm:w-14 sm:h-14 sm:rounded-full，漏掉sm:overflow-hidden就会大屏变方
如何让 mask-image 在 Tailwind 中真正生效
Tailwind 默认不解析 mask-image: url() 这类值，直接写 mask-[url('./logo.svg')] 或内联 style 都不会被编译进 CSS，Safari 更是只认同时存在且完全一致的 -webkit-mask-image 和 mask-image。
- 必须把 SVG 转成 base64（删掉 XML 声明、换行，fill 全设为
currentColor），再注册进tailwind.config.js的theme.extend.maskImage（Tailwind 5.3+）或theme.extend.backgroundImage（兼容旧版） - 使用时要同时写两个类：
mask-image-logo+-webkit-mask-image-logo，base64 字符串必须一字不差 - 路径必须是 public 目录下可访问的绝对路径，相对路径（如
./mask.svg）构建后大概率 404 - 遮罩图如果是 PNG，确保它有明确黑白灰阶：纯白显示，纯黑隐藏，灰色半透明
遮罩与圆角组合使用时最容易忽略的点
想让一张带遮罩的头像也呈圆形，不是简单叠加 rounded-full 和 mask-image-radial 就完事——二者作用机制不同，冲突风险高。
-
rounded-full作用于容器盒模型，mask-image作用于图像像素层；若先用 mask 做镂空再套圆角，边缘可能锯齿或模糊 - 优先用
mask-image实现复杂形状（如 logo 剪影），用rounded-full + overflow-hidden + object-cover做基础圆形，二者尽量不混用同一张图 - 若必须共存，确保
mask-size设为cover或100% 100%，避免遮罩图拉伸导致圆形区域错位 - Safari 下尤其注意：
mask-image和border-radius同时启用时，需确认transform-box: fill-box是否影响参考系，否则遮罩中心偏移
替代方案：不用 mask-image 也能模拟遮罩效果
多数“顶部淡出”“渐变遮黑”类需求，其实不需要 SVG 遮罩，用叠层 + bg-gradient 更轻量、兼容性更好。
- 写法示例：
<div class="relative w-64 h-64 bg-gradient-to-b from-transparent via-black/30 to-black/80"><img src="/photo.jpg" class="absolute inset-0 object-cover"></div> - 优点：不依赖浏览器 mask 支持，SEO 友好，无 base64 维护成本
- 缺点：无法做镂空或矢量级不规则裁剪（比如只显示一个五角星区域）
- 真正卡住人的从来不是语法怎么写，而是花两小时调
mask-[url()]，结果发现只是路径错了、没加overflow-hidden、或者 Safari 没配对-webkit-前缀
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
