纯CSS实现键盘按键效果的关键在于模拟物理直觉：用多层box-shadow构建立体感，语义化class控制键宽，:active配合transform实现下压反馈，差异化设置border-radius与间隙margin。
纯 CSS 实现键盘按键效果，关键不是“画得像”，而是让每个键在视觉层级、尺寸逻辑和交互反馈上符合真实键盘的物理直觉——border-radius、box-shadow 和 linear-gradient 的组合比单纯加边框更有效。
用 box-shadow 模拟按键立体感，别只靠 border
真实键盘按键有凸起感，仅用 border 会显得扁平甚至“卡顿”。正确做法是用多层 box-shadow 构建明暗过渡：
-
inset -8px 0 8px rgba(0,0,0,0.15)：模拟按键左侧受光较弱的阴影 -
inset 0 -8px 8px rgba(0,0,0,0.25)：模拟顶部压下的暗部 -
0 0 0 2px rgba(0,0,0,0.75)：外轮廓硬边，强化按键边界 -
10px 20px 25px rgba(0,0,0,0.4)：底部投射阴影，增强浮起感
注意：inset 阴影必须写在前面，否则会被后面的非 inset 阴影盖住；所有值单位统一用 px，避免缩放时比例错乱。
不同键型用 class 区分宽度，别硬写 inline-style
空格键、Shift 键、Enter 键等物理尺寸差异大，CSS 中应通过语义化 class 控制，而非在 HTML 里写 style="width:500px"：
.space { width: 500px; }.shift { width: 225px; }.enter { width: 175px; }.up, .down, .left, .right { width: 100px; height: 50px; }
这样既方便批量调整（比如统一缩小 5%），也利于后续用 JS 动态添加 active 状态类。若混用内联样式，JS 切换状态时容易被覆盖。
按键按下态用 :active + transform，别只改背景色
用户点击时，仅变色或减 opacity 不够真实。真实键盘是物理下压，视觉上应有“沉下去”的错觉：
- 默认状态加
transform: translateY(0); transition: transform 0.05s; -
:active里设transform: translateY(3px); - 同时把
box-shadow中的inset值调小（如inset -2px 0 2px rgba(0,0,0,0.1)），削弱立体感
注意：不要给 :active 加 transition，否则按下的响应会有延迟；transform 比修改 top 更高性能，且不触发重排。
箭头键/功能键单独处理圆角和布局
方向键（.up、.down）和 .tab、.cmd 这类功能键，宽度高度比例与字母键不同，不能共用同一套 border-radius：
- 字母键用
border-radius: 10px（四角均匀） - 方向键建议
border-radius: 10px 10px 0 0（仅上边圆角，模仿物理键帽斜面） -
.cmd或.alt类宽键可用border-radius: 8px，略小于字母键，避免视觉过重
另外，方向键常以“十字”排列，需用 display: flex + flex-direction: column 套一层容器，再对 .up、.down 做 margin 微调，硬塞 position: absolute 容易在响应式下错位。
最易被忽略的是按键之间的间隙：真实键盘键帽间有 2–4px 缝隙，CSS 中用 margin 而非 padding 控制，且所有键的 margin 必须一致，否则网格会歪。建议统一设 margin: 4px，并在父容器加 display: flex; flex-wrap: wrap; 保证自动换行对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
