新拟态需双层inset阴影模拟挤压感：外层右下浅色、内层左上深色，偏移值严格相反且颜色贴近背景。如background:#f0f0f0，则box-shadow:2px 2px 4px #d9d9d9,-2px -2px 4px #ffffff。
box-shadow 双层叠加实现新拟态（neumorphism）的关键逻辑
新拟态按钮不是靠“加高光+加阴影”就行，而是用两个方向相反、颜色贴近背景的 box-shadow 模拟“挤压感”。核心是：外层浅色阴影向右下，内层深色阴影向左上，且两者都用 inset —— 否则只是普通浮雕，不是新拟态。
- 必须同时使用
inset，否则视觉上会跳出容器，破坏“嵌入式”质感 - 两层阴影的偏移值（x/y）要严格相反，比如
2px 2px和-2px -2px，不能一个2px 2px一个-3px -3px，否则不对称、发虚 - 颜色不能直接用黑/白：深色阴影用比背景略暗的灰（如背景是
#f0f0f0，阴影用#d9d9d9），浅色阴影用略亮的灰（如#ffffff），否则对比过强，变成老式 3D 按钮
实际 CSS 写法与常见翻车点
最简可用写法长这样：
button {
background: #f0f0f0;
border: none;
width: 120px;
height: 40px;
border-radius: 12px;
box-shadow:
2px 2px 4px #d9d9d9,
-2px -2px 4px #ffffff;
}
但上线后常遇到三个问题：
-
box-shadow在 Safari 旧版本（inset 支持不稳定，必须显式加上inset关键字，否则第二层失效 —— 正确写法是：inset 2px 2px 4px #d9d9d9, inset -2px -2px 4px #ffffff - 按钮带文字时，
color必须和背景足够区分，但又不能太刺眼；推荐用#555或#666，别用纯黑 - 如果父容器用了
filter: brightness()或backdrop-filter，两层阴影会异常变浓或消失，此时得改用伪元素模拟，不能硬套box-shadow
响应式与交互状态怎么加 hover / active
新拟态的交互反馈不能靠改变背景色（会破坏质感），只能微调阴影参数。重点在“方向反转”和“强度收敛”：
立即学习“前端免费学习笔记（深入）”；
- 默认态：右下浅 + 左上深 → 视觉凸起
-
:hover态：把两层阴影的偏移全归零（0 0），模糊值略加大（如从4px到6px），显得更“柔和浮起” -
:active态：交换两层阴影颜色和方向 —— 原来右下是浅色，现在右下换成深色，左上换成浅色，相当于“按下去”，但注意偏移值仍保持2px 2px和-2px -2px，只是颜色对调
错误做法是给 :active 加 transform: translateY(1px)，这会让按钮脱离新拟态语义，变成普通卡片按钮。
深色模式下怎么不重写整套样式
别为深色模式单独写两套 box-shadow 值。用 prefers-color-scheme + CSS 自定义属性更稳：
:root {
--bg: #f0f0f0;
--shadow-light: #ffffff;
--shadow-dark: #d9d9d9;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #2a2a2a;
--shadow-light: #444;
--shadow-dark: #111;
}
}
button {
background: var(--bg);
box-shadow:
inset 2px 2px 4px var(--shadow-dark),
inset -2px -2px 4px var(--shadow-light);
}
真正容易被忽略的是：深色模式下，--shadow-light 如果设成 #ffffff，会在暗背景上炸出一块白斑。必须用低饱和度、略带灰阶的亮色，比如 #444 或 #3a3a3a，否则凹凸感直接崩掉。
