新拟态生成

怎么用

1. 选一个背景色。卡片与底板共用这个颜色 —— 正是共色让效果成立。
2. 拖尺寸与圆角定出卡片外形。
3. 调距离控制阴影扩散范围，调强度控制两道阴影色偏离基础色的程度。
4. 选形态：凸起把两道阴影画在外面，凹陷画在里面，平面不画阴影。
5. 复制 CSS。注释里记着派生出来的两个阴影色，方便你在别处复用。

常见用法

• 凸起控件 —— 按钮、开关、卡片看起来像从同一块底板上鼓起来。
• 按下状态 —— 把按钮的 :active 从凸起切成凹陷，就能得到按下去的效果。
• 找合适的基础色 —— 带一点蓝调的中性灰比纯白或纯黑更能撑住两道阴影。
• 试软 UI 方向 —— 先在这里定好距离与强度，再把数值写进设计变量。
• 检查对比度 —— 预览文字会在深浅之间自动切换，基础色不耐受时一眼可见。

常见问题

问：为什么在纯白或纯黑背景上效果就没了？ 答：两道阴影是把基础色分别加深与提亮得到的。接近白或黑时，其中一个方向没有空间可走，那道阴影就消失了。

问：按钮的按下状态怎么做？ 答：静止态用凸起版本，:active 用凹陷版本，其余数值保持一致，只有阴影方向在变。

问：这种风格的无障碍性如何？ 答：新拟态控件与底板的对比度通常偏低，光靠阴影也无法把状态传达给辅助技术。请保留可见标签、焦点环，并让对比度达到你的目标等级。