CSS实现新拟态风格

什么是新拟态(Neumorphism) UI 风格    网上似乎还没有一个准确统一的定义。    按照我个人的通俗理解，就是将界面的一部分凸起来，另一部分凹下去，形成的一种错落有致的拟物风格。
    代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」
    本次项目链接：https://wwa.lanzous.com/i671Ze8nl7i
新拟态 UI 风格与扁平、投影风格的对比

从上面这张对比图可以看出，扁平风格就像是一张纸贴在墙面上，投影风格像是浮在半空中，而新拟态风格则像是墙面上直接凸起了一块。
新拟态 UI 风格的实现方式
要实现这种风格
精髓在于一个白色的阴影+一个常规阴影。
一个示例如下图所示：

建个div盒子备用

更多精彩图片 请登录

body设置好背景色

更多精彩图片 请登录

更多精彩图片 请登录

给盒子定义好宽高，我这里加背景颜色是为了让盒子显示出来

更多精彩图片 请登录

更多精彩图片 请登录

然后就是给盒子加阴影了，
box-shadow: 18px 18px 30px #d1d9e6;
第一个18px是x方向的右偏移(右正左负)
第二个18px是y方向的下偏移(下正上负)
第三个30px是阴影的模糊程度
第三个值是阴影的颜色

更多精彩图片 请登录

更多精彩图片 请登录

前文提到了，新拟态你白色阴影+常规阴影组合的，所以我们还要在他的对角加一个白色阴影
直接把常规阴影的css复制下来，在偏移坐标前面加个负号，就可以了

更多精彩图片 请登录

更多精彩图片 请登录

如果想让盒子变成圆形，只需要设置边框圆角的值为100px就行了
border-radius: 100px;

更多精彩图片 请登录

更多精彩图片 请登录

盒子里面可以加个图标
然后给img进行一个简单的居中定位
比之前的空白就好看多了

更多精彩图片 请登录

更多精彩图片 请登录

在阴影前面添加一个inset，就可以设置出内阴影的效果

更多精彩图片 请登录

更多精彩图片 请登录

利用伪元素before
还可以实现圆环双层新拟态化的效果

更多精彩图片 请登录

更多精彩图片 请登录

当然，叠加不一定要用伪元素，定好位也可以
然后这里解释一下
top，left为什么是20%
height，width为什么是60%
首先top和left定位我们不是只定一边，而是双向都是20%
一个盒子100%，定位减去40%，所以小盒子的宽高当然就只剩下60%了

更多精彩图片 请登录

更多精彩图片 请登录

差不多就是这样，后期在更新一点。
如果不懂，也懒得弄，当当当，
https://neumorphism.io/
新拟态css在线生成哈哈