小红点定位应使用 transform 而非 margin 或 top/left；需设父元素 position: relative，子元素 position: absolute + transform: translate(50%, -50%)；配合 min-width、height、border-radius: 50% 解决截断与圆角问题；显隐推荐 visibility + opacity + pointer-events 或条件渲染；颜色须用 css 变量适配深色模式与高对比度，并确保焦点 outline 可见。
小红点位置偏移不居中？用 transform 而不是 margin 或 top/left
小红点（badge）常因父容器尺寸变化或字体渲染差异导致定位漂移，直接写 top: -5px; right: -5px 在不同缩放、字体大小或浏览器下容易错位。真正稳定的方式是结合相对定位 + transform。
- 父元素（如按钮）需设
position: relative - 小红点用
position: absolute，再用transform: translate(50%, -50%)锚定右上角 - 避免依赖像素值微调，例如：
right: 0; top: 0; transform: translate(50%, -50%) - 若父元素 padding 不为 0，先用
right: 4px; top: 4px对齐内边距起点，再transform居中
小红点文字被截断或圆角失效？检查 display 和 min-width
常见错误是给小红点加 display: inline-block 却没设最小宽高，或用了 flex 但未约束内容换行。结果是数字“9”显示正常，“10”被截成“1”，或圆角在 Safari 下消失。
- 必须设
min-width: 16px（至少容纳两位数）和height: 16px - 用
line-height: 16px垂直居中文字，避免padding引起高度波动 - 圆角推荐
border-radius: 50%，而非固定像素值，确保始终为圆形 - 禁止使用
white-space: nowrap，否则超长数字（如“99+”）会撑破容器
React/Vue 中动态控制显隐？别只靠 display: none
用 display: none 控制小红点显隐会导致布局重排（reflow），尤其在频繁更新通知数时有卡顿。更轻量的做法是视觉隐藏 + 保留占位。
- 推荐用
visibility: hidden; opacity: 0配合pointer-events: none，保持 DOM 结构稳定 - 若数值为
0或null，直接不渲染 badge 元素（更省资源） - Vue 用户注意：不要用
v-show绑定display，改用v-if控制渲染 - React 中避免把 badge 写在按钮内部又用
useState频繁 setState —— 提取为独立组件，用shouldComponentUpdate或React.memo缓存
适配深色模式和高对比度？颜色和阴影不能硬编码
小红点默认用 background-color: #f00 在深色背景下几乎不可见，且 WCAG 2.1 要求红点与背景对比度 ≥ 3:1。硬写颜色值会破坏主题一致性。
- 用 CSS 自定义属性，例如：
--badge-bg: var(--color-danger, #ff4d4f)，配合 :root 定义明/暗主题色 - 避免仅靠颜色传达状态，叠加
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.3)增强轮廓 - 禁用
text-shadow，它在高对比度模式下会被系统强制关闭 - 测试时开启 Windows 高对比度模式或 macOS 的“增加对比度”，确认小红点仍清晰可辨
button 上触发 focus 状态时的 outline 被遮挡 —— 记得给 badge 加 isolation: isolate 或用 z-index 显式分层，否则键盘用户 tab 到按钮时看不到焦点框。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
