kbd 标签需用 CSS 模拟物理按键：用 inset box-shadow 做按压阴影，背景色 #f0f0f0、文字色 #333、padding 2px 5px；多键组合用 span 包裹加号并设 margin 0 2px；响应式用 font-size: 0.9em；与 code 标签区分样式，避免语义混淆。
kbd 标签默认样式太弱，根本不像真实按键
<kbd></kbd> 本身只提供语义（表示用户输入的键盘操作），浏览器默认渲染非常简陋：通常是等宽字体 + 少量内边距，没有阴影、边框或立体感。直接写 <kbd>Ctrl</kbd> 在多数页面里几乎看不出是“按键”。
必须用 CSS 覆盖默认样式。关键不是加一堆装饰，而是模拟物理按键的视觉特征：轻微凸起感、明确边界、背景色与文字对比足够。
- 推荐用
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2)模拟按压阴影，比纯 border 更自然 - 背景色建议用
#f0f0f0或#e6e6e6，避免纯白（缺乏层次）或过深（像按钮） - 文字颜色用
#333，别用#000——真实键盘字迹没那么重 - 务必设
padding: 2px 5px，太小显得局促，太大失真
多键组合（如 Ctrl+C）怎么排版才不乱
常见错误是直接写 <kbd>Ctrl</kbd>+<kbd>C</kbd>，结果两个按键紧贴、加号没空隙，视觉上像一个词。
正确做法是用 <span></span> 包裹分隔符，并控制间距：
立即学习“前端免费学习笔记（深入）”；
<kbd>Ctrl</kbd><span style="margin: 0 2px">+</span><kbd>C</kbd>
- 加号两侧加
margin，值设为0 2px最稳妥，适配不同字号 - 不要用
- 若需显示“同时按下”，可加
title属性：<kbd title="同时按下">Ctrl</kbd> - Mac 用户习惯看到
⌘符号，可用 Unicode：<kbd>⌘</kbd>（即 ⌘），但需确认字体支持
响应式场景下 kbd 文字缩放容易糊掉
小屏幕里，默认 font-size 不随容器缩放，<kbd></kbd> 可能比周围文字大一圈或挤成一团。
解决方案是放弃固定像素值，改用相对单位：
- 用
font-size: 0.9em（相对于父元素），而非12px - 配合
line-height: 1.3防止多行时行距塌陷 - 如果项目用 rem，确保根字号合理；否则
em更安全 - 避免在
<kbd></kbd>上设min-width—— 小屏下会撑破容器
和 code 标签混用时边界容易混淆
比如写 <p>运行 <code>npm run dev，然后按 Ctrl+C 停止
<code> 和 <kbd></kbd> 默认样式接近，用户分不清哪是命令哪是按键。
- 给
<code>加浅蓝背景（#f5f7ff）、圆角border-radius: 3px - 给
<kbd></kbd>保持灰白背景 + 稍粗边框（border: 1px solid #ccc） - 两者都设
vertical-align: middle，避免基线错位 - 别让
<kbd></kbd>套在<code>里——语义冲突，渲染也难控制
真实项目里，<kbd></kbd> 最常被忽略的是交互反馈：它不该响应 hover 或 focus，除非你明确要模拟可点击按键。别为了“好看”加 cursor:pointer，那会误导用户。
