新拟态是一种融合了拟物化与扁平化设计的 UI 风格,通过两个方向相反的 box-shadow(一亮一暗)营造出物理凹凸感,让界面元素看起来柔和而立体。
核心是使用 CSS box-shadow 属性设置两组阴影:一组亮色模拟光源照射,一组暗色模拟背光面。通过调整偏移量、模糊半径和颜色对比度来控制立体深度。
适合卡片、按钮、表单控件、仪表盘等交互组件,尤其是浅色背景的简约风格页面。不建议大面积用于文字密集区域以免影响可读性。
凸起(Convex)用外阴影模拟元素浮出表面;凹陷(Concave)用内阴影 inset 模拟按入效果;浮雕(Emboss)模糊更小、立体更锐利,类似浮雕质感。