红点徽章必须用 position: absolute 定位，不能用 display: inline-flex；需父容器设 position: relative，配合 top/right 和 transform 微调；须设宽高、避免 margin 偏移；数字徽章要控制最大宽度与截断，推荐 js 控制显示值；必须添加 aria-label 保障可访问性；兼容性优先选择绝对定位+像素偏移而非 clip-path 或 inset()。
红点徽章用 position: absolute 而不是 display: inline-flex
红点本质是叠加在按钮右上角的独立元素，必须脱离文档流才能精准定位。如果把红点写成按钮内部的子元素并用 display: inline-flex 布局，它会参与按钮内容流，导致按钮宽度被撑开、对齐偏移，且无法稳定贴靠右上角。
正确做法是给按钮容器设 position: relative，红点用 position: absolute + top: 0 + right: 0 定位。注意：若按钮本身有 padding，红点需额外用 transform: translate(50%, -50%) 微调，否则会卡在右上角边缘外侧。
- 红点容器必须设
width和height（如8px），不能只靠内容撑开 - 避免用
margin模拟偏移——不同按钮尺寸下表现不一致 - 若按钮是
<a></a>标签，确保其text-decoration: none，否则下划线可能穿红点而过
红点数字徽章要控制最大宽度和截断逻辑
纯红点（无数字）只需一个 <span class="badge"></span>；但带数字时，常见需求是“超过 99 显示 99+”，且数字不能换行或溢出按钮边界。这时候不能依赖 white-space: nowrap 硬撑，而要用 max-width + overflow: hidden + text-overflow: ellipsis 组合。
更稳妥的做法是用 JavaScript 控制显示值（例如 Math.min(num, 99) + (num > 99 ? '+' : '')），再注入 DOM。纯 CSS 实现“99+”需要伪元素配合 content，但无法动态响应数值变化。
- 数字徽章建议最小宽度设为
16px，高度16px，圆角50%，字体大小10px - 避免用
font-size: 0.625rem这类相对单位——父级font-size变动时徽章易失比例 - 若按钮高度不固定（如响应式按钮），红点尺寸应使用
em或rem，而非固定px
可访问性问题：红点不能只有颜色传达信息
纯红色圆点对色觉障碍用户不可见，WCAG 要求必须提供文字替代。不能只写 <span class="badge"></span>，而应加上 aria-label 或隐藏文本。
推荐写法：<span class="badge" aria-label="有 3 条新消息">3</span>。若红点无具体数字（仅表示“有更新”），则用 aria-label="有新内容"，同时确保该提示能被屏幕阅读器读出。
- 不要用
title属性替代aria-label——移动端不触发，且非所有辅助技术支持 - 避免把红点放在
<button></button>的::after伪元素里——伪元素内容无法被aria属性关联 - 如果红点用于通知未读数，务必同步更新
aria-live="polite"区域，让刷新感知可被监听
兼容旧浏览器时慎用 clip-path 和 inset()
有些方案用 clip-path: inset(0 0 0 50%) 把红点“切”进按钮右上角，看似省事，但 clip-path 在 Safari 14.1 以下、IE 完全不支持，且部分安卓 WebView 渲染异常。最简兼容路径仍是 position: absolute + transform。
另一个坑是 inset() 作为 clip-path 参数，在 Firefox 中需加 -moz- 前缀，但即便加了，裁剪行为在 flex 容器中也可能错位。不如老老实实写四行定位代码。
- IE11 及以下不支持
transform: translate()的百分比值，需改用像素偏移（如right: -4px） - 若项目需支持 iOS 12，
clip-path的 SVG 路径语法比inset()更稳，但增加维护成本 - 真正省事又兼容的方式：红点用
background+border-radius，不依赖任何现代布局特性
overflow: hidden 或 transform 会意外裁掉绝对定位的红点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
