新拟态按钮必须满足背景纯色、元素同色、边框透明三硬条件，用两层inset阴影模拟光照：亮边4px 4px 8px #f9f9f9（右下），暗边-4px -4px 8px #e0e0e0（左上），顺序错则立体感翻转。
新拟态按钮不是加个阴影就完事——它必须同时满足背景纯色、元素同色、边框透明这三个硬条件，否则看起来就是灰蒙蒙一块，毫无立体感。
box-shadow 必须用两层 inset 且顺序不能错
新拟态的“凸起”或“凹陷”感，全靠一对方向相反的 inset 阴影模拟物理光照。关键不是“有没有阴影”，而是“哪层在前、偏移正负、颜色深浅”：
- 亮边必须是
4px 4px 8px #ffffff（右下偏移，偏白高光），暗边必须是-4px -4px 8px #e0e0e0（左上偏移，略深暗影） - 顺序反了（比如先写暗边再写亮边），立体方向会翻转，按钮看起来像被挖进去而不是浮出来
- 颜色不能直接用
#000或#fff：高光用#ffffff易刺眼，推荐#f9f9f9；暗影比背景深 10–15%，比如背景是#f5f5f5，就用#e0e0e0 - iOS Safari 对 subpixel 渲染弱，偏移量建议取偶数（
4px而非3.5px）
background-color 和页面背景必须完全一致
这是最容易被跳过的一步。只要 background-color 和外层容器背景色有哪怕 1 个 hex 差异，双阴影就会穿帮，边缘发虚、立体感崩塌：
- 别假设“都是浅灰就行”，要复制粘贴同一色值，例如
#f5f5f5 - 如果页面背景是渐变或图片，新拟态直接不可用——它只认纯色背景
- 使用 CSS 自定义属性时，确保
--bg-color在根和按钮中同步，避免作用域污染导致不一致
border 必须为 transparent，且不能省略声明
border: none 不等于 border: transparent。前者仍可能触发浏览器 UA 样式残留，后者才能真正让内阴影自然过渡到边缘：
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
border: 2px solid transparent（宽度建议与border-radius匹配，如12px圆角配2px边框） - 漏掉这行，Safari 下常出现阴影被裁、圆角处断层
- 不要用
outline替代，它不参与盒模型计算，无法支撑内阴影的渲染逻辑
移动端和可访问性里最隐蔽的坑
新拟态在桌面端看着舒服，一上手机或给读屏器用，问题立刻暴露：
- 文字对比度普遍低于 WCAG 4.5:1 要求：
#666放在#f5f5f5上只有 ~2.3:1，必须改用#333或加text-shadow: 0 0 1px #fff - 禁用状态不能只设
opacity: 0.5，要叠加一层inset暗影强化“压下去”的反馈，否则用户无法感知状态变化 - 盲人用户依赖屏幕阅读器识别按钮，而新拟态常因低对比+无边框被跳过——必须保留
type="button"和语义化aria-label - 悬停效果在触屏设备无效，
:hover必须搭配:focus和:active才能覆盖全交互路径
真正难的不是写出那两行 box-shadow，而是从设计稿开始就锁定背景色值、全程校验对比度、并在禁用/焦点/高对比模式下逐个验证视觉反馈是否成立。
