真实凹凸感拟物按钮需同时用外阴影（模拟高光）和内阴影（模拟暗部），颜色须贴合背景，禁用纯黑/白；默认态推荐box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 -2px 4px rgba(255,255,255,0.6)，:active态去掉外阴影并加强内阴影，如box-shadow: inset 0 -4px 6px rgba(0,0,0,0.2)，配合transform: translatey(2px)及transition: all 0.1s ease-out。
按钮阴影和边框怎么配出真实凹凸感
拟物（Skeuomorphic）按钮的核心是用 box-shadow 模拟光照方向下的高光与暗部，不是简单加个阴影就行。关键在于：**同一按钮需同时存在内阴影（模拟按压凹陷）和外阴影（模拟边缘受光）**，且颜色必须贴近背景色，不能用纯黑/白。
常见错误是只用一层 box-shadow，或用 rgba(0,0,0,0.3) 这类通用值——在浅色背景上会发灰，在深色背景上又糊成一片。
- 默认状态推荐：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 -2px 4px rgba(255,255,255,0.6)（外阴影模拟顶部高光，内阴影模拟底部暗部） - 点击态（
:active）要反转：去掉外阴影，加强内阴影深度，例如：box-shadow: inset 0 -4px 6px rgba(0,0,0,0.2) - 背景色必须和页面主色协调；若背景是
#f8f9fa，按钮用#e9ecef，高光就用rgba(255,255,255,0.8)，不能硬套固定值
为什么 border-radius 和 background-gradient 不能省
真实物理按钮边缘有微弧度，且表面反光不均——纯色填充 + 直角边 = 塑料玩具感。拟物质感靠的是「轻微圆角 + 径向渐变」共同作用。
很多人以为加个 border-radius: 8px 就够了，但实际需要更精细控制：圆角值要小于按钮高度的一半（比如高度 48px，border-radius 最大取 18px），否则像药丸；渐变方向必须匹配虚拟光源（通常设为 radial-gradient(circle at top, ...)）。
- 推荐渐变写法：
background: radial-gradient(circle at top, #ffffff 0%, #e0e0e0 100%) - 务必配合
background-clip: padding-box，避免渐变溢出圆角边界 - 禁用
outline，否则点击时会破坏凹凸连续性；用outline: none+box-shadow替代聚焦样式
:active 状态下 transform 移动多少像素才不假
拟物按钮被按下时，视觉上是“沉下去”，不是“缩进去”。所以不能只靠 transform: scale(0.98) 或 translateY(2px) —— 这两种都会让按钮看起来像被压扁或错位，失去厚重感。
真实反馈是：按钮整体下沉，同时内阴影加深、外阴影消失、高光区域收缩。位移量必须和按钮尺寸强关联，且需配合阴影变化同步发生。
- 高度 48px 的按钮，
:active推荐transform: translateY(2px)（不是 1px 太弱，不是 4px 过猛） - 必须同时改
box-shadow（如前所述），否则单靠位移毫无凹陷感 - 动画必须用
transition: all 0.1s ease-out，不能用ease-in-out——按压是快速下沉，释放是缓慢回弹，拟物逻辑要求非对称缓动
键盘操作和无障碍支持怎么不破坏拟物体验
用户用 Tab 键聚焦按钮时，如果只加 outline，会直接盖掉阴影和渐变，拟物效果全毁。但完全去掉焦点样式又违反可访问性要求。
解决方案是把焦点反馈“藏进拟物体系里”：用更细的内边框 + 更柔和的外阴影替代传统虚线框，既满足 WCAG 2.1，又不跳出设计语境。
- 聚焦态用：
outline: none; box-shadow: 0 0 0 2px rgba(0,123,255,0.2), inset 0 0 0 1px rgba(0,123,255,0.3) - 确保
:focus-visible优先级高于:active，避免鼠标点击后还残留焦点环 - 不要依赖
tabindex手动干预；计算器按钮天然应有tabindex="0"，但需验证键盘 Enter/Space 触发时，:active样式是否正常生效（某些浏览器对键盘触发的:active支持不一致）
最易被忽略的是：拟物按钮的点击反馈必须和真实物理节奏一致——从按下到回弹的时间差要大于 80ms，否则人眼会判定为“卡顿”而非“质感”。别为了快而砍掉过渡时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
