小红点用绝对定位+伪元素最稳妥，按钮需设position:relative，伪元素用top:0;right:0;transform:translate(50%,-50%)精确定位，显隐通过opacity和pointer-events控制，兼顾动画、可访问性与高对比度模式适配。
小红点用绝对定位 + 伪元素最稳妥
直接在按钮上加 ::after 伪元素，比额外套一层 更轻量，也避免干扰可访问性。关键是把小红点“钉”在右上角，不随按钮内容变化偏移。
常见错误是只设 position: absolute 却忘了给父容器加 position: relative，结果小红点相对整个页面定位，飘到屏幕角落。
- 按钮必须设置
position: relative - 伪元素用
content: ""+position: absolute - 右上角定位推荐：
top: 0; right: 0; transform: translate(50%, -50%)（比top: -4px; right: -4px更适配不同字号） - 小红点尺寸建议用
min-width和min-height（如6px），避免空通知时塌缩
动态控制小红点显隐要靠 class 切换
不要用 display: none 控制伪元素显隐——它会破坏过渡动画，且无法做渐变淡出。正确做法是用透明度 + 指针事件开关。
典型场景：用户点击后清空未读数，小红点应淡出而非突兀消失。
- 默认状态加
opacity: 1; pointer-events: auto - 隐藏时用
opacity: 0; pointer-events: none - 务必加
transition: opacity 0.2s ease-in-out - JS 中通过切换 class（如
has-unread）来触发动画，别直接操作 style
无障碍和高对比度模式下不能只靠颜色
纯红色小红点在色觉障碍用户或 Windows 高对比度模式下可能完全不可见。必须补充视觉线索。
浏览器开启高对比度模式后，自定义颜色会被强制替换，background-color: red 可能变成黑色或透明。
- 给伪元素加
border: 2px solid currentColor，利用文字色兜底 - 配合
content: "•"（实心圆点字符），即使背景失效仍有符号 - 如果按钮有
aria-label，确保包含未读状态，例如aria-label="消息（3条未读）" - 避免依赖
box-shadow做红点，高对比度模式下常被忽略
React/Vue 中注意响应式更新时机
框架里直接改状态触发重渲染没问题，但要注意：小红点的显隐 class 必须和数据严格同步，否则会出现“已读了但红点还在”的错觉。
容易踩的坑是异步清空未读数后，DOM 还没更新就执行了动画类切换。
- Vue 中用
$nextTick确保 class 在 DOM 更新后添加/移除 - React 中避免在
useEffect里直接操作 DOM 类名，优先用 state 驱动 class 名 - 若用数字徽标（如 “9+”），注意字体大小和
min-width匹配，防止数字变多时撑开按钮
小红点看着简单，真正难的是在各种缩放、高对比度、屏幕阅读器、动画中断等边界情况下都保持可用——颜色只是表象，定位逻辑、可访问性补丁、框架更新节奏才是实际卡点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
