必须用包裹容器（如）配合绝对定位实现头像右下角在线状态点，容器设position: relative和overflow: hidden，状态点用并设尺寸、热区及css变量控制颜色，确保响应式与移动端可用。
怎么用纯 HTML + CSS 实现头像右下角在线状态点
不能只靠 <img>，必须用包裹容器 + 绝对定位。HTML 本身没有“状态点”语义，得靠结构和样式配合实现，否则响应式时会错位或被裁剪。
- 把
<img>包进一个<div class="avatar"> 容器里，确保该容器设 <code>position: relative - 状态点用伪元素
::after或单独<span class="status"></span>，推荐后者——便于 JS 控制显隐和颜色 - 状态点尺寸建议用
em或rem（如0.5em），避免在高缩放/小屏幕下糊成一片 - 右下角定位别写死
right: 4px; bottom: 4px，改用right: 0.25em; bottom: 0.25em，随头像大小自适应 - 解决方案一：给容器加
overflow: hidden（最简单有效） - 解决方案二：状态点用
transform: translate(50%, 50%)配合right: 0; bottom: 0，比固定像素更稳定 - 切忌对
<img>本身设border-radius后再放状态点——<img>不是块级容器，无法承载定位子元素 - 如果头像来自 CDN 且尺寸不固定，用
aspect-ratio: 1 / 1锁定正方形，防止拉伸变形影响状态点位置 - 用 CSS 自定义属性统一管理：
--status-online: #4ade80; --status-away: #f59e0b; --status-offline: #9ca3af - JS 切换时，只改容器上的类名，比如
avatar.classList.replace("status-offline", "status-online")，不要直接操作style.backgroundColor - 为状态点加
transition: background-color 0.2s ease，避免颜色突变；但别给transform或opacity加过渡——小圆点不需要入场动画 - 注意：服务端返回的状态字段名可能叫
is_online、presence或status，前端映射逻辑要提前约定好，别在模板里写三元判断 - 给状态点加
width: 16px; height: 16px;（至少），再用padding: 4px扩展热区，总点击区达 24×24px，再配合touch-action: manipulation - 别依赖
z-index把状态点“垫高”，移动端层叠上下文复杂，容易被其他组件遮挡；优先保证它在 DOM 顺序中位于头像之后 - 如果头像支持点击展开菜单，状态点区域应阻止事件冒泡：
statusEl.addEventListener("click", e => e.stopPropagation())，否则点状态点也会触发头像主操作 - 真机调试时用 Chrome DevTools 的 “Toggle device toolbar” + “Capture screenshot” 查看实际点击热区是否覆盖圆点——眼见为实
为什么 border-radius: 50% 头像加状态点后常出现锯齿或偏移
根本原因是圆角裁剪和子元素绝对定位的坐标系不一致：父容器 border-radius 只影响背景和边框渲染，但不会“裁剪”子元素的绘制区域；如果状态点超出原图边界，就会露在圆角外。
如何用 JS 动态切换在线/离线/忙碌状态点颜色
状态点不是装饰，是可交互信号。硬编码颜色（比如写死 background: #4ade80）会导致维护困难，也难以适配深色模式。
移动端点击头像触发状态切换时，为什么点不中状态点
因为默认 <span class="status"></span> 没有尺寸，也没有点击热区。iOS Safari 和 Android Chrome 对小尺寸可点击区域有最小 44×44px 要求，否则触发困难或误触。
overflow: hidden 导致圆角失效，以及没扩展移动端点击热区导致体验断层。
