圆形头像必须用 border-radius: 50% 且宽高相等，Bootstrap 5 已移除 rounded-circle 类；角标应绝对定位在 position: relative 的父容器内，推荐尺寸 0.75rem 圆形、右上偏移 top: -2px right: -2px 并配合 transform 精准对齐。
圆形头像的 border-radius 必须设为 50%，不是 100% 或其他值
Bootstrap 5 默认不提供圆形头像类，得靠自定义 CSS。关键点是：只有当元素宽高相等时，border-radius: 50% 才能生成正圆；如果用 border-radius: 100%，反而可能在某些尺寸下变成椭圆或失效。
常见错误是直接套用 rounded-circle（Bootstrap 4 的类），但 Bootstrap 5 已移除该类——它现在只保留 rounded-pill 和基础 rounded 变体，不支持语义化圆形。
- 确保头像容器或
<img>元素有明确的width和height（例如48px），且两者相等 - 推荐写法：
border-radius: 50%+object-fit: cover（防图片拉伸） - 避免用
border-radius: 50vw或百分比基于父容器——容易失圆
状态角标用 position: absolute 叠加，别依赖 badge 组件
Bootstrap 5 的 .badge 类默认是块级、带内边距和背景色的标签，不适合做右上角小圆点。强行用会撑开布局、定位不准，还难缩放。
正确做法是手写一个轻量角标：绝对定位 + 小尺寸 + 边框或背景控制状态色。它必须相对于头像容器定位，所以头像父元素需设 position: relative。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
position: relative，否则absolute会相对于 body 定位 - 角标推荐尺寸：
width: 12px,height: 12px,border-radius: 50% - 常用状态色可复用 Bootstrap 调色板，比如在线：
background-color: var(--bs-success)；离线则写死#28a745 - 右上角偏移建议：
top: -2px,right: -2px（配合transform: translate(50%, -50%)更精准）
响应式场景下，em 或 rem 单位比 px 更可靠
固定 48px 头像在手机小屏上会显得过大，而角标若用 px 容易糊或过小。用相对单位能让整个组合随字体缩放自动适配。
- 头像设
width: 3rem,height: 3rem（1rem = 16px，默认下即 48px） - 角标用
width: 0.75rem,height: 0.75rem（12px → 12/16 = 0.75） - 避免在媒体查询里重复写多套
px值——维护成本高，且可能漏掉某些断点 - 注意：
object-fit在旧版 iOS Safari（cover，如需兼容可加font-size: 0清除图片下方空白
HTML 结构要扁平，避免嵌套过深导致 z-index 冲突
角标层级错乱常不是因为没写 z-index，而是父元素有 transform、filter 或 will-change 创建了新层叠上下文，把角标“关”在局部里。
- 结构建议：
<div class="avatar-wrapper"><img><span class="status-badge"></span></div>，仅两层 - 不要把角标塞进
<button>或<div class="d-flex">内部——这些自带层叠上下文 - 如真需
z-index，角标设z-index: 2即可，头像本身无需设（默认为auto） - 调试时可用浏览器开发者工具的「Layers」面板看是否意外创建了层叠上下文
object-fit——哪怕 CSS 全对，一张宽高比严重失调的图片仍会显示异常。 
