新拟态设计：不只是一层阴影

什么是新拟态

新拟态（Neumorphism，New Skeuomorphism 的合成词）是一种 UI 设计风格，2019 年末开始在 Dribbble 上流行。它介于扁平设计和拟物设计之间——不像 iOS 6 之前的拟物那样写实，但远比扁平设计有层次感。

核心特征

单一光源 — 通常来自左上角
双阴影 — 暗阴影和亮阴影同时存在，模拟凹凸
与背景同色 — 卡片、按钮的背景色和页面背景完全一致
大面积留白 — 信息密度低，专注感强

什么时候用

新拟态不适合高信息密度的应用（如后台管理系统），但它天然适合以下场景：

个人博客
作品集网站
音乐播放器
天气/时钟小组件

这也是为什么我选择把它用在博客上——阅读场景天然需要低密度、高沉浸感的设计。

代码实现

用 Tailwind CSS 实现新拟态只需要一行任意值：

<div class="rounded-2xl bg-[#f0f0f3]
  shadow-[8px_8px_16px_#d1d1d4,-8px_-8px_16px_#ffffff]
  hover:-translate-y-1 transition-all duration-500">
  <!-- 卡片内容 -->
</div>

配合尊重 prefers-reduced-motion 的 CSS 动画，就能做出流畅、可靠的卡片交互。