拟物化按钮需严格遵循物理光照逻辑：亮边（负vertical offset）必须在box-shadow中前置，配合整数偏移、border-bottom与阴影协同、:active状态联动transform/box-shadow/border-bottom，并确保背景色一致、事件链完整。
拟物化按钮不是加几层 box-shadow 就完事的——立体感崩塌、点击无反馈、移动端失效，90% 的问题都出在顺序、偏移方向或事件链断裂上。
box-shadow 顺序写反，凸起直接变凹陷
拟物按钮的“浮出感”全靠两层阴影模拟光照逻辑：上亮边 + 下暗边。亮边必须写在前面，否则会被后写的暗影盖住，高光消失，按钮看起来像被挖进去。
-
box-shadow: 0 -2px 0 2px #f9f9f9, 0 3px 6px rgba(0,0,0,0.15)✅ 正确：负 vertical offset 是上亮边，正 offset 是下暗边 -
box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 -2px 0 2px #f9f9f9❌ 错误：暗边先画，亮边被遮，立体感归零 - iOS Safari 对 subpixel 渲染弱，
-2.3px这类值会糊，一律用整数偏移（如-2px）
border-bottom 单独用，只是条线，不是凸起
只设 border-bottom: 3px solid #e0e0e0，用户感知不到体积——它没明暗对比、没位移反馈，纯视觉欺骗失败。
- 必须和
box-shadow协同：border-bottom模拟受压面投影，box-shadow提供光照层次 -
:active状态要同步收缩：border-bottom: 1px+box-shadow: 0 1px 3px rgba(0,0,0,0.2)+transform: translateY(2px) - 别用
inset阴影替代border-bottom，边缘易糊，结构感弱
:active 点击没反应？先查 pointer-events 和 z-index
很多按钮点下去没“下陷”，不是 CSS 写错了，而是事件根本没触发到按钮节点。
- 检查父容器是否设了
pointer-events: none - 排查子元素（比如图标、文字 span）z-index 过高，遮挡了点击区域
- 按钮自身不能有
pointer-events: none；移动端还要加touch-action: manipulation避免 iOS Safari 延迟 -
:active中只改background-color或opacity是无效的——必须联动transform、box-shadow、border-bottom
背景色差一个 hex，双阴影就穿帮
拟物按钮对背景纯度极其敏感。哪怕页面背景是 #f5f5f5，按钮设成 #f4f4f4，阴影边缘就会发虚、漂浮感断裂。
-
background-color必须和页面背景完全一致（推荐用 CSS 变量统一管理） - 高光色选
#f9f9f9比#ffffff更柔和，更贴合物理反射逻辑 - 深色模式下，背景和高光色都要同步切换，否则拟物逻辑失效
拟物按钮的复杂点不在效果堆砌，而在每一处数值都得服务于物理逻辑：偏移方向、颜色明度、事件路径、背景一致性——漏掉任何一环，立体感就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
