kbd 默认样式几乎不可见，因浏览器仅设 font-family: monospace，缺乏背景、边框、内边距和圆角；需添加 background-color、border+border-radius、padding 和 vertical-align 四条基础规则，并正确嵌套结构（如 Ctrl + S），同时适配深色模式与高对比度模式。
kbd 默认样式为什么几乎看不见
浏览器对 kbd 的默认渲染只设了 font-family: monospace，没背景、没边框、没内边距、没圆角。在 Tailwind、Bootstrap 或 modern CSS reset 环境下，它退化成和普通文本几乎一样的等宽字，用户扫一眼根本分不清哪是快捷键。更糟的是，部分旧辅助技术可能直接跳过这个元素——因为它没提供任何视觉锚点，语义也无从感知。
必须加的四条基础 CSS 规则
不写这四条，kbd 就等于没美化：
-
background-color: #f5f5f5（或#f0f0f0）—— 没背景就没有“按键感”，纯靠字体无法建立认知 -
border: 1px solid #ccc+border-radius: 4px—— 边框定义轮廓，4px 圆角接近真实键盘弧度，别用 2px 或 8px -
padding: 2px 6px—— 小字号下文字贴边会糊成一团；用em单位（如0.15em 0.4em）更适配缩放，但 px 在文档类页面更可控 -
vertical-align: middle—— 否则和周围行文本基线错位，+ 号会悬空或下沉
组合键写法错误导致样式崩坏
常见错误不是 CSS 写得不好，而是 HTML 结构错了：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ❌
<kbd>Ctrl+S</kbd>：屏幕阅读器读作 “C-T-R-L-plus-S”，不是 “Control S”；+ 号没被包裹，基线对齐失控 - ❌
<kbd><kbd>Ctrl</kbd><kbd>S</kbd></kbd>：HTML 嵌套非法，部分解析器静默降级，CSS 选择器失效 - ✅ 正确写法：
<kbd>Ctrl</kbd> + <kbd>S</kbd>——每个物理键独立，+ 是普通文本，语义清晰、样式可控 - ✅ macOS 场景：
<kbd>⌘</kbd> + <kbd>S</kbd>，Unicode ⌘（U+2318）在所有现代 macOS/iOS 浏览器中稳定渲染，不用图片或字体图标
深色模式与高对比度模式下的坑
很多美化方案在深色主题下直接失效：
立即学习“前端免费学习笔记（深入）”；
- 默认
background-color: #f5f5f5在 dark mode 下变成一块灰斑，甚至糊成黑色；必须用@media (prefers-color-scheme: dark)或data-theme="dark"手动重置，例如background-color: #333+color: #fff - 别用
box-shadow: inset模拟按压感——它在 Windows 高对比度模式下会被系统强制抹掉，只剩文字浮在背景上 - 避免纯黑底白字（
background: #000; color: #fff），WCAG 2.1 明确指出对比度过高易致眩光；推荐#2d2d2d底 +#e0e0e0字 - + 号必须单独控制：设
font-size: 0.9em、line-height: 1.2、background: transparent，否则在深色背景下会突兀发亮或消失
kbd 当成纯样式工具——它本质是语义标签，美化只是辅助理解。样式再酷，如果结构写错、平台符号没适配、深色模式没兜底，用户看到的就只是两块灰块加一个飘着的加号。 
