用box-shadow的inset关键字配合多层内阴影可模拟三维凹陷效果，需顶部亮边与底部暗边协同，并在:active态移除高光、加深暗影，同时注意safari兼容性及背景色必要性。
用 box-shadow 模拟三维凹陷效果，不是加阴影而是“反向压进去”
凹陷按钮的本质不是往外投阴影，而是让视觉上像被按下去——关键在用 inset 关键字和多层内阴影配合。普通 box-shadow: 0 2px 4px rgba(0,0,0,0.2) 是凸起感，换成 inset 才能“吸进去”。
常见错误是只写一层 inset 阴影，结果发灰、没层次。真正有立体感的凹陷需要至少两层：顶部亮边 + 底部暗边，模拟光线从左上方来时的明暗交界。
-
box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), inset 0 -2px 4px rgba(0,0,0,0.15)—— 上层高光提亮边缘，下层暗影加深底部 - 避免用纯黑
rgba(0,0,0,1)，会显得脏；用低透明度（0.05–0.15）更自然 - 配合
background色阶变化：凹陷态比常态背景色略深 5–10%，强化“压入”错觉
按钮按下态（:active）必须取消 inset 高光，否则像卡住
用户点击时，如果保持原有 inset 高光，反而会削弱“被按下去”的反馈——因为真实物理按钮按下后，顶部高光会消失或弱化。
正确做法是：在 :active 中移除顶部亮边，只保留底部暗边，并略微加大其偏移量，模拟更深的压入感。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 常态：
box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), inset 0 -2px 4px rgba(0,0,0,0.15) -
:active态：box-shadow: inset 0 -3px 6px rgba(0,0,0,0.25)（单层、更深、无高光） - 别忘了同步调整
transform: translateY(1px)，但位移量要小（≤2px），否则失真
兼容性陷阱：IE 不支持 inset，但现代项目通常可忽略
IE10+ 支持 inset，IE9 及以下完全不识别，会退化为无阴影——但这不是 bug，是预期行为。如果你的项目明确不支持 IE9，就不用 polyfill。
真正容易被忽略的是 Safari 对多层 inset 的渲染差异：某些旧版 Safari（≤14.1）会把第二层 inset 当作外阴影处理，导致边缘发虚。解决方案是合并为单层，用模糊+偏移模拟层次：
- 安全写法（全浏览器一致）：
box-shadow: inset 0 -1px 3px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.7) - 别用
spread值（第四个长度参数），它在部分 Safari 版本中对inset渲染异常 - 测试时务必在真机 Safari 和 Chrome 同时预览，仅靠 DevTools 模拟不够准
不要用 border 模拟凹陷，那是上世纪做法
有人试图用 border-top: 1px solid #fff + border-bottom: 1px solid #aaa 伪造立体感，这本质是 hack，且在高清屏上易出现亚像素模糊、颜色不准、响应式缩放失真等问题。
现代 CSS 的 inset 阴影是 GPU 加速的，性能更好，缩放保真，语义清晰。唯一要注意的是：确保按钮有明确的 background-color，否则 inset 阴影在透明背景上不可见。
- 必须设置
background，哪怕只是#f0f0f0 - 若用渐变背景，
inset阴影仍生效，但高光层建议改用rgba(255,255,255,0.6)避免过曝 - 文字颜色需与凹陷态背景足够对比，尤其在深色主题下，别让文字“陷进阴影里看不见”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
