关键样式是按钮设position: relative，角标span设position: absolute、top: 0、right: 0，并用transform: translate(50%, -50%)微调定位；需兼顾可访问性配色、圆角、阴影及响应式适配。
用绝对定位给按钮加红色角标的关键样式
直接在按钮内部嵌套一个 span 作为角标，再用 position: absolute 定位到右上角。按钮本身必须设为 position: relative，否则 absolute 会相对于最近的定位祖先（比如 body）偏移，导致角标飘走。
常见错误是只加了 absolute 却忘了给按钮加 relative，结果角标出现在页面左上角或完全错位。
- 按钮容器必须有
position: relative - 角标元素设
position: absolute，配合top: 0、right: 0 - 用
transform: translate(50%, -50%)微调，让角标真正贴在右上角顶点 - 角标宽高建议用
em或固定px，避免内容撑开变形
角标样式要兼顾可读性和视觉权重
纯红背景 + 白字是最常用组合，但要注意对比度是否达标（尤其对色弱用户）。别用 color: white + background-color: #ff0000 这种低可访问性搭配，优先选 #d32f2f（Material UI 的深红）或 #c62828。
角标字号不宜过大，否则像弹窗；也不宜过小，否则数字看不清。推荐 font-size: 0.75em，配合 line-height: 1 和 padding: 0 0.3em 居中。
- 用
border-radius: 50%做圆形角标，或4px做圆角矩形 - 加
box-shadow: 0 1px 2px rgba(0,0,0,0.2)提升层次感 - 避免用
z-index除非按钮有其他重叠元素，多数情况不需要
响应式场景下角标容易错位怎么办
当按钮宽度变化（比如移动端缩窄）、字体缩放或使用 rem/em 单位时，right: 0 + top: 0 仍可靠，但 transform 的偏移量可能需要微调。更稳妥的做法是改用 inset 简写（Chrome 87+ 支持），例如 inset: 0 auto 0 -8px，但兼容性不如传统写法。
- 移动端测试时重点检查角标是否被截断（父容器
overflow: hidden会剪掉它） - 如果按钮有
padding，角标right值建议设为负值（如right: -6px）让它略微溢出 - 不要依赖 JavaScript 动态计算位置——纯 CSS 更快也更稳定
Vue/React 中动态渲染角标要注意什么
框架里常通过条件渲染控制角标显隐，比如 v-if="count > 0" 或 {count > 0 && <span classname="badge">…}</span>。这里最容易踩的坑是：角标 DOM 节点被销毁后，按钮尺寸突变引发布局抖动。
- 推荐始终保留角标元素，用
opacity: 0+pointer-events: none隐藏，而非移除 - 用
transition: opacity 0.15s ease-in-out实现淡入淡出 - 数字为 0 时显示空角标还是不显示？业务逻辑决定，但视觉上建议统一处理（比如显示
0或隐藏）
overflow 和按钮自身的 line-height 对角标垂直居中的干扰。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
