要让标签像真键盘，需用box-shadow重构凸起键帽与按压反馈：外阴影模拟高光（0 2px 4px rgba(0,0,0,0.1)），内阴影强化暗边（inset 0 -2px 3px rgba(0,0,0,0.15)），hover时微调transform: translateY(1px)并加深内阴影；禁用border和linear-gradient，深色模式下动态调整阴影强度与文字色以保可访问性。
kbd 标签默认样式太简陋，怎么改才像真键盘？
浏览器对 <kbd></kbd> 的默认渲染（通常是等宽字体 + 简单边框）离物理按键差很远：没阴影、没按压反馈、没键帽立体感。要模拟真实键盘，核心是用 CSS 重构「凸起键帽」+「轻微内阴影」+「hover 下沉」效果。
关键不是加更多装饰，而是控制三个层：背景色（模拟键帽材质）、box-shadow（外凸光感 + 内凹按压）、border（强化边缘厚度）。别用 text-shadow 或纯背景图——前者失真，后者不响应缩放和高对比度模式。
-
background-color选中性灰（如#f0f0f0），避免纯白（反光过强）或深灰（像脏键） - 外阴影用浅色扩散（
box-shadow: 0 2px 4px rgba(0,0,0,0.1)）模拟顶部高光 - 内阴影用深色偏移（
inset 0 -2px 3px rgba(0,0,0,0.15)）强化底部暗边 - hover 时把外阴影变短、内阴影加深，并微调
transform: translateY(1px)模拟按压
为什么不能直接用 border-radius + background 渲染？
单纯圆角+渐变背景会丢失键盘按键的关键视觉线索：顶部亮、底部暗、左右侧有微妙明暗过渡。真实键帽受环境光影响，不是均匀发光体。CSS 中仅靠 background 无法表达这种方向性明暗，必须依赖 box-shadow 的偏移和透明度组合来伪造。
常见错误是给 <kbd></kbd> 加 border: 1px solid #ccc——这会让键帽看起来像贴纸而非立体件。正确做法是去掉 border，用双层 box-shadow 替代：一层向外模拟高光反射，一层向内模拟结构阴影。
立即学习“前端免费学习笔记（深入）”；
- 禁用
border，所有边缘感由box-shadow承担 - 避免
linear-gradient做键帽背景——在 Retina 屏或缩放下易出现色带或模糊 - 慎用
filter: drop-shadow()，它不支持 inset，且性能低于原生box-shadow
如何适配深色模式并保持可访问性？
深色背景下，原方案的浅灰键帽会发灰发虚。不能简单反转颜色（比如全黑键帽），因为真实机械键盘在暗光下仍有漫反射。要用 @media (prefers-color-scheme: dark) 调整亮度和阴影强度，同时确保 WCAG 对比度达标（键帽文字与背景至少 4.5:1）。
重点不是“换颜色”，而是“重平衡”：深色模式下降低外阴影透明度（rgba(255,255,255,0.08)），加大内阴影深度（inset 0 -3px 4px rgba(0,0,0,0.3)），文字色改用 #e0e0e0（非纯白）防刺眼。
- 文字必须用
color显式声明，不能依赖系统默认 - 禁用
opacity控制整体透明度——它会削弱文字对比度，违反可访问性 - 测试时打开系统「高对比度模式」，确认
<kbd></kbd>仍清晰可辨（Windows / macOS 均会强制重绘为高对比样式）
实际项目中要注意哪些兼容性细节？
老版 Safari（inset 阴影的多层叠加写法，IE 已无需考虑，但部分安卓 WebView 仍会忽略 box-shadow 的 inset 参数。稳妥做法是提供降级：无内阴影时，用更粗的外阴影 + 更强的背景色差来维持立体感。
另外，<kbd></kbd> 默认是 inline 元素，若内部含空格或连字符（如 <kbd>Ctrl + Shift + T</kbd>），需加 white-space: nowrap 防止折行破坏键帽形状；若想让多个 <kbd></kbd> 并排对齐，用 display: inline-flex 比 inline-block 更可控（避免基线对齐错位）。
- 对 Safari 15.x 及更早版本，单独写一条不带
inset的box-shadow作为兜底 - 避免在
<kbd></kbd>上设固定height或line-height，优先用padding控制尺寸 - 如果项目用了 CSS-in-JS（如 Emotion），注意某些库会自动删减未识别的
box-shadow值，需显式启用 vendor prefix 支持
box-shadow 的偏移值。 
