流行是一种轮回，今年新拟态的风格在设计圈非常火，虽然这个设计风格存在一些问题，但个人也是蛮喜欢的，于是就把这个应用到自己的小程序里了。

一、新拟态定义和特点

通过观察，我们发现新拟态有如下特点：

1. 只有一个光源，左上角亮色投影，右下角深色投影
2. 常用与按钮组件和卡片上
3. 与背景对比度较弱
4. 分为两种状态，凹下去和凸出来

二、代码实现

.neumorphism{
  box-shadow: -7px -7px 20px 0px #fff9,
              -4px -4px 5px 0px #fff9,
              7px 7px 20px 0px #0002,
              4px 4px 5px 0px #0001;
}
.neumorphismin,.neumorphism:active{
  box-shadow: 0px 0px 0px 0px #fff9,
              0px 0px 0px 0px #fff9,
              0px 0px 0px 0px #0001,
              0px 0px 0px 0px #0001,
              inset -7px -7px 20px 0px #fff9,
              inset -4px -4px 5px 0px #fff9,
              inset 7px 7px 20px 0px #0003,
              inset 4px 4px 5px 0px #0001;
}

在使用的过程中，只需要在原来的按钮加上class即可，点击态自动加上凹下去效果。

凸起：class ="neumorphism"
凹下：class ="neumorphismin" 

实现前后对比图：