CSS 徽章样式：不靠插件，也能做出有呼吸感的标签

上周改一个后台通知栏，产品经理甩来一张设计稿：“这个红点要带数字，但不能太刺眼；点击后消失，但得留个‘已读’的余味。”我盯着那个小小的徽章看了三分钟——它既不是纯装饰，也不是独立组件，而是一个状态的轻量表达。后来发现，团队里好几个人都在各自写 .badge，有的用 ::after 伪元素硬撑，有的塞 <span> 嵌套三层，还有的直接上 SVG……其实，真正好用的徽章，从来不是“画出来”的，而是“长出来”的。

徽章（Badge）在 UI 中的本质，是对主内容的即时状态补充。它不该抢戏，但得让人一眼捕捉；可以小，但不能糊；支持数字，也得兼容文字、图标甚至空状态。这些需求，纯靠 class 堆砌或框架默认样式，很容易陷入“改一处崩三处”的窘境。

先说最常踩的坑：用 border-radius: 50% 强行造圆点。
问题不在圆不圆，而在它和文字的垂直对齐永远飘忽。line-height 拉高？文字贴顶；vertical-align: middle？父容器一变就失效。解法其实很朴素：把徽章当内联盒子养，用 flex 做它的骨架。

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2em; /* 防止单数字塌缩 */
  height: 1.2em;
  padding: 0 0.35em; /* 左右留白比固定 width 更自然 */
  font-size: 0.75em;
  font-weight: 600;
  border-radius: 0.6em; /* 半径 = 高度一半，稳稳的圆角矩形 */
  white-space: nowrap;
}

注意这里没设 line-height，也没碰 vertical-align——因为 align-items: center 已经接管了所有垂直居中逻辑。min-width 是关键：数字“1”和“10”宽度差一倍，强制最小宽度，视觉节奏才稳。你试过把 0.35em 改成 0.4em 吗？左右呼吸感立刻不一样。

颜色不是选完就算。很多项目直接写死 background: #ff4d4f，结果深色模式下它像块烧红的铁皮。更务实的做法是：用语义化变量锚定感知亮度，而非绝对色值。比如：

.badge--new { --badge-bg: oklch(0.75 0.22 25); }   /* 明亮但不过曝的橙 */
.badge--read { --badge-bg: oklch(0.65 0.08 255); } /* 低饱和蓝灰，暗示“沉降” */
.badge--empty { --badge-bg: transparent; border: 1px solid var(--border); }

oklch() 在现代浏览器里能更精准控制明度与彩度，避免 HSL 调色时“调着调着突然变荧光”。如果你还在用 #ccc 表示禁用态，不妨试试 oklch(0.7 0.02 250)——它在暗色模式下自动变深，不用额外媒体查询。

动态场景才是真考场。比如“未读消息数归零时，徽章该消失还是变‘已读’？”
答案取决于用户心智模型。购物车里“0”要藏，因为“无商品”是默认态；通知中心里“0”得显“已读”，因为用户需要确认动作完成。这时别写两套 class，用属性驱动状态更干净：

<span class="badge" data-count="0" data-status="read">已读</span>

.badge[data-count="0"][data-status="read"] {
  background: var(--badge-bg-read);
  color: var(--text-secondary);
}
.badge[data-count="0"]:not([data-status]) {
  display: none; /* 默认隐藏零值 */
}

属性选择器让 HTML 自己说话，CSS 只负责响应。比 JS 切 class 更轻，也比 :empty 伪类更可控——毕竟空 span 里可能有空格或注释。

最后说个容易被忽略的细节：徽章和主内容的间距逻辑。很多人用 margin-left: 0.5em 硬推，结果按钮变宽时徽章撞边。更好的方式是让徽章“粘”在主元素末尾：

.button .badge {
  margin-inline-start: 0.375em; /* 使用逻辑属性，适配 RTL */
  transform: translateY(-0.1em); /* 微调基线，让它看起来不浮在空中 */
}

transform 这一行，是我调了七版之后加上的。它不改变文档流，却让徽章和文字基线达成一种微妙的视觉咬合——就像咖啡杯沿那圈浅浅的奶泡，不多，但让整体味道稳下来。

写完这个徽章系统后，我删掉了项目里三个第三方 badge 组件。不是它们不好，而是当一个样式能同时满足设计师的像素洁癖、产品的状态颗粒度、开发的维护成本，它就不再是个“装饰”，而成了界面呼吸的节律器。

下次看到右上角那个小红点，别急着复制粘贴代码。停两秒，问问自己：它想告诉用户什么？它该在什么光线下存在？它消失时，有没有留下一点余味？
答案有了，样式自然就长出来了。