CSS技巧：人人都能看懂的新拟态实现思路
曾经有段时间新拟态火爆前端圈，时过境迁，新拟态并没有走入千家万户，而只存在于一些小众的产品上。究其原因，首先是设计成本太高，其次是前端程序员知道新拟态是用 box-shadow 来实现，但就是不知道怎么才能做出符合自己审美的新拟态。
今天，我们就来扒一扒新拟态的奥妙，以前端工程师的角度总结出实现新拟态的正确思路。
在我看了一众新拟态的设计后，总结了三个要点：光与背景、box-shadow、细节打磨。且看我下文分析，看我的思路对不对。
欢迎加入「🌍独立全栈开发交流群」，一起学习交流前端和Node技术。
光与背景
理解新拟态设计的第一步，不是学习 box-shadow 的用法，而是思考光与背景的作用。新拟态的设计方法可以总结为：有光（打在平面上）就有了 box-shadow。我们得通过平面来强调光的效果，不信你看下面这张图：
上下两个新拟态按钮，除了背景不同，其他代码一样，下面的看起来明显更立体。这就是背景的作用，合理的背景能让用户好像看到光源一样。背景之于新拟态设计，就是画龙点睛的那一笔。
那么什么样的搭配更合理？我总结出来这样的规律：
- 以白色的主题为例，背景不能用白色，而要使用较浅的色调，如灰色、蓝灰色或暖色调，这样才能指示出光源方向（如图中按钮左上白色区域）
- 按钮可以用与背景一样或相近的颜色，这样更有凹凸感。
你也可以去观察新拟态设计的产品，他们的背景和按钮/方块也基本符合这样的规律。
box-shadow详细用法
如果背景的选择能帮你打开新拟态的设计思路，那么学好 box-shadow 则会让你打开创造新拟态产品的大门。
box-shadow 属性在CSS中用于向框添加一个或多个阴影。它可以接受多组的值来创建多层阴影，每组值描述了一个阴影的外观。以下是可能的值：
inset(可选)：如果不使用这个值，阴影将在框的外部；如果使用了这个值，阴影在框的内部（即凹陷效果）。offset-x(必须)：水平阴影的位置。正值阴影向右，负值向左。offset-y(必须)：垂直阴影的位置。正值阴影向下，负值向上。blur-radius(可选)：模糊距离。其值越大，阴影就越大且越模糊。如果没有设置这个值，阴影的边缘将是硬边缘。spread-radius(可选)：扩散半径。正值会使阴影扩大且边缘更加模糊，负值会使阴影收缩。color(可选)：定义阴影的颜色。可以使用任何CSS颜色值（如#rrggbb,rgb(),rgba(),hsl(),hsla()等）。
使用示例：
/* 单个阴影，没有模糊，黑色 */
box-shadow: 5px 5px 0 0 black;
/* 单个阴影，模糊半径为 5px */
box-shadow: 3px 3px 5px black;
/* 单个阴影，带有扩散效果 */
box-shadow: 3px 3px 5px 1px black;
/* 内部阴影 */
box-shadow: inset 3px 3px 5px black;
/* 多个阴影 */
box-shadow: 3px 3px 5px black, -3px 0 5px grey;
/* 阴影带有透明度 */
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
box-shadow 的值不复杂，但如果不常使用，我们是很难直观看出数值对应的效果，所以还是熟能生巧，多练练。
细节打磨
上面两节介绍的是新拟态的核心设计方法，但如果你实操一下，仍然会觉得创造出来的效果跟预期依然有所差异，但又不知道问题在哪里。这里还有一些设计细节的建议可以供你参考：
- 阴影和光效:
- 双重阴影：利用内阴影和外阴影来创造凹凸感。通常使用较浅的阴影（浅色）模拟光源，以及较深的阴影（暗色）模拟深度。
- 柔和阴影：阴影应该是柔和且分布广泛，避免使用过于尖锐或深色的阴影。
- 几何形状和边框:
- 圆角：新拟态设计倾向于使用圆角。这些圆角可以帮助元素更自然地融入背景。
- 简洁边框：边框通常细致且不突出，有时甚至是透明的，以增加立体感。
- 交互效果:
- 交互状态：为不同的状态（如hover、active）设计不同的视觉效果，比如改变阴影深度或颜色。
- 过渡动画：使用平滑的过渡效果，使状态变化更自然、更有吸引力。
- 字体和图标:
- 简洁字体：使用简洁、易读的字体，以保持整体设计的一致性。
- 图标风格：图标应与整体风格保持一致，避免过于复杂或扁平化的设计。
作为一名不会设计的前端工程师，只能通过不断打磨细节来提升自己的设计能力啦～
你可以在CodePen看我写的demo👇
结语
你看，看起来高大上的新拟态总结起来也不过就这么点内容，拿出你的CSS，码一个自己满意的新拟态吧！