HTML怎么做出类似键盘按键的按钮？立体阴影盒模型技巧-html教程-PHP中文网

用box-shadow模拟按键按压态的核心是阴影层次变化：常态用外阴影+内阴影制造微凸，按下时清空外阴影、反转加粗内阴影形成凹陷；需配合弹性尺寸、精准圆角、js补位及恰当配色实现真实键盘感。

html怎么做出类似键盘按键的按钮？立体阴影盒模型技巧

用 `box-shadow` 模拟按键按压态最直接

纯 CSS 实现键盘按键感，核心不是边框或背景色，而是阴影的层次变化。正常状态用外阴影模拟高光+内阴影模拟凹陷；按下时反转——去掉内阴影、加深外阴影偏移，视觉上就“陷下去”了。

关键参数组合：

box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.1)（常态：外阴影向下+内阴影向上，制造微凸）
box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 2px 4px rgba(0,0,0,0.2)（按下：外阴影清空，内阴影反向加粗，形成凹陷）

注意 inset 内阴影的 y 值方向要和外阴影相反，否则立体感会垮。RGBA 透明度别设太高，0.1–0.2 足够，否则像贴了层灰膜。

按钮尺寸与圆角必须匹配真实键盘比例

多数键盘按键宽高比接近 1:1，但字符键略宽、功能键略窄。CSS 中别死守 width: 40px; height: 40px —— 实际应按内容弹性：padding: 6px 12px + min-width: 36px 更自然。

圆角值很敏感：

机械键盘常用 border-radius: 3px
薄膜键盘倾向 border-radius: 2px
超过 4px 就开始像计算器键，失去打字键的硬朗感

别用 % 做圆角，响应式缩放时会失真；固定像素值配合 min-width 和 line-height 控制文字居中更稳。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

`:active` 伪类不够用，得加 JS 监听 `mousedown`/`touchstart`

仅靠 :active 在触摸设备上基本失效，iOS Safari 点击后延迟约 300ms 才触发，且松手即恢复，按压反馈断层。真实体验需要 JS 补位。

简单方案（无需框架）：

button.addEventListener('mousedown', () => btn.classList.add('pressed'));
button.addEventListener('touchstart', e => {
  e.preventDefault();
  btn.classList.add('pressed');
});
button.addEventListener('mouseup', () => btn.classList.remove('pressed'));
button.addEventListener('touchend', () => btn.classList.remove('pressed'));

对应 CSS 只需定义 .pressed 类，样式完全复用按下态的 box-shadow，不用重复写 :active。注意 touchstart 必须 preventDefault，否则 iOS 会先触发鼠标事件再触发触摸事件，造成双触发。