用html+css可实现无js的徽标数字通知按钮，核心是button相对定位内嵌绝对定位的span徽标，通过flex居中、border-radius设圆形，并用badge-hidden类控制0值隐藏；进阶需注意z-index、字体渲染及移动端热区。
用 HTML + CSS 就能做出带徽标数字（即“小红点”或角标数字）的通知按钮，不需要 JS 也能实现基础效果，但动态更新数字需 JS 配合。
基础结构：按钮内嵌徽标容器
核心是用一个 button 包裹内容，再用 span 作为徽标（badge），通过绝对定位把它固定在右上角：
<button class="notify-btn"> 消息 <span class="badge">3</span> </button>
CSS 样式：定位 + 圆形徽标
给按钮设相对定位，让徽标可绝对定位；徽标设为圆形、背景色、居中文字，并控制尺寸和位置：
.notify-btn {
position: relative;
padding: 8px 16px;
border: none;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
.badge {
position: absolute;
top: -6px;
right: -6px;
background: #ff4d4f;
color: white;
font-size: 12px;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
注意：top/right 值要配合按钮大小微调，太小会贴边，太大会偏移；display: flex 确保数字垂直水平居中。
响应式与空状态处理
当数字为 0 或空时，通常隐藏徽标（避免显示 “0” 或空白红点）：
- HTML 中可加 class 控制显隐：
<span class="badge badge-hidden">0</span> - CSS 添加：
.badge-hidden { display: none; } - JS 更新时判断：
badgeEl.classList.toggle('badge-hidden', count === 0);
进阶提示：适配图标按钮或圆角按钮
如果按钮含图标（如 bell 图标），徽标建议放在图标右上角；若按钮是圆形（如头像旁小按钮），徽标 right 改为 50% 并搭配 transform: translate(50%, -50%) 更精准定位。
不复杂但容易忽略细节：徽标层级（z-index）、字体粗细（避免数字发虚）、移动端点击热区（确保 badge 不影响按钮点击区域）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
