用户指南中kbd标签需自定义css样式以提升可读性：设置背景色、边框、圆角、等宽字体、非零内边距，并将组合键如ctrl+alt+del拆分为独立kbd包裹，+号外露；深色模式下推荐使用canvas/captiontext系统颜色确保对比度。
kbd 标签默认样式太弱，不适合用户指南
浏览器对 <kbd></kbd> 的原生渲染（如 Chrome 仅加粗+浅灰背景）在文档中几乎不可读，尤其组合键如 Ctrl+C 容易被当成普通文本。用户指南需要视觉明确、尺寸合理、有层次感的按键表示，不能依赖默认行为。
- 默认背景色过淡（
rgb(240, 240, 240)），在浅色或深色背景下都可能失效 - 无内边距，字符紧贴边界，组合键（如
Shift+Alt+T）拥挤难识别 - 不区分单键与组合键，缺乏视觉节奏，影响扫读效率
用 CSS 覆盖 kbd 默认样式的关键属性
只需重置几个核心样式就能显著提升可读性，无需复杂框架。重点控制背景、边框、圆角、字体和间距：
kdb {
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
padding: 2px 6px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.9em;
line-height: 1.4;
}
-
padding必须设为非零值，否则组合键中的+符号会贴边难辨 -
font-family推荐用等宽字体栈，避免系统缺失时回退到比例字体（如 Times New Roman） - 不要设
display: inline-block——<kbd></kbd>默认是inline，强行改块级会破坏行内布局流
组合键之间用 + 连接，但 + 不应被包裹在 kbd 内
语义上，+ 是分隔符而非按键，若把整个 Ctrl+Alt+Del 套进一个 <kbd></kbd>，会导致样式失控（如背景连成一片）且无法单独控制符号间距。正确写法是每个键独立包裹，+ 外露：
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>
- 这样每个键都有独立背景和 padding，视觉清晰分离
- 如果需要统一控制
+的颜色或上下位置，可用kbd + kbd::before伪元素插入，但多数场景直接写+更轻量可靠 - 避免嵌套
<kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>—— 语义错误，CSS 也难精准控制
深色模式下 kbd 背景需适配，别只靠 media 查询硬切
单纯用 @media (prefers-color-scheme: dark) 把背景改成 #333 可能导致文字对比度不足（尤其小字号）。更稳妥的做法是用 color-scheme: light dark 配合系统色值：
kdb {
color-scheme: light dark;
background-color: Canvas;
color: CanvasText;
border-color: CanvasText;
}
-
Canvas和CanvasText是 CSS 系统颜色关键字，在深/浅色模式下自动取值，比手动写#1e1e1e更健壮 - 注意：IE 和旧 Safari 不支持
color-scheme，若需兼容，再加一层媒体查询降级 - 测试时务必在系统级开启深色模式（不只是浏览器插件），否则
prefers-color-scheme不触发
<kbd>Esc</kbd> 文字灰得看不见。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
