标签需显式添加背景、边框、内边距和垂直对齐才具备可识别性，组合键须拆分为独立元素并用外部+连接，且须适配深色模式、移动端及可访问性要求。
<kbd></kbd> 标签本身不提供可用的视觉样式，直接使用等于没写——它只设了 font-family: monospace，没有背景、边框、内边距、圆角，也不对齐文本基线。
为什么<kbd></kbd>在页面里根本看不见
Chrome、Firefox、Safari 对 <kbd></kbd> 的默认渲染极其简陋：仅等宽字体 + 极浅灰背景（部分浏览器甚至不加），无边框、无圆角、无 padding。在 Tailwind、Bootstrap 或现代 CSS 重置环境下，它会退化成和 <code> 几乎无法区分的普通等宽文字。用户扫读时完全注意不到这是快捷键提示。
必须显式添加以下四点才具备基本可识别性：
-
background-color: #f0f0f0（或#f5f5f5），否则无“按键感” -
border: 1px solid #ccc+border-radius: 4px（真实键盘多为 2–3px，别硬套 4px） -
padding: 2px 6px（小字号下文字贴边会糊成一团） -
vertical-align: middle（否则与周围文本基线错位）
组合键必须拆开写，+号不能进<kbd></kbd>
写成 <kbd>Ctrl+S</kbd> 是典型错误：屏幕阅读器读作 “C T R plus S”，不是 “Control S”；无法单独给 Ctrl 加修饰键样式；也无法适配 macOS 的 ⌘ 替换逻辑。
正确结构是每个物理按键独立包裹，连接符写在标签外部：
<kbd>Ctrl</kbd>+<kbd>S</kbd><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>F4</kbd>-
<kbd>⌘</kbd>+<kbd>S</kbd>（macOS 用 UnicodeU+2318，别写<kbd>Cmd</kbd>）
禁止嵌套：<kbd><kbd>Ctrl</kbd><kbd>S</kbd></kbd> 虽旧标准允许，但现代浏览器解析不一致，且增加 DOM 复杂度。
深色模式、移动端和可访问性硬约束
默认 background-color: #f0f0f0 在深色主题下直接糊成黑斑，必须用 @media (prefers-color-scheme: dark) 或 data-theme 属性手动覆盖，例如：
kbd { background-color: #333; border-color: #555; color: #fff; }
@media (prefers-color-scheme: dark) { kbd { background-color: #444; } }
移动端需加 display: inline-block 和 white-space: nowrap 防止换行；+ 连接符若未单独控制字号/颜色/背景，会因继承父级字体而显得突兀——建议把它也包进 <kbd class="kbd-plus">+</kbd> 并设 background: transparent、font-size: 0.9em、line-height: 1.2。
别加 tabindex 或 aria-keyshortcuts：它本不可聚焦，也不是交互元素，强行添加会破坏键盘导航流，也误导辅助技术。
最易被忽略的一点：所有样式补丁都得围绕「语义优先」展开——<kbd></kbd> 不是装饰工具，它的唯一职责是告诉用户“请按这个物理键”。一旦为了视觉效果牺牲结构（比如塞斜杠、混写平台、嵌套包裹），可访问性和维护成本就立刻失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
