什么是 Neumorphism？
最开始是一位来自乌克兰的设计师 Alexander Plyuto 在许多平台发布了自己设计的新作品。 接下来我们来看看这个作品是长什么样子的。
该作品上传到网上后获得了许多好评。有许多网友将这种新型的设计概念称之为拟物风格（New Skeuomorphism）。
也有人说这是拟物风格 2.0 版本（Skeuomorph 2.0），而后来就有设计师创出一个新的虚构名词，把 New Skeuomorphism 两个词组合，Neo 谐音 New 就是 Neuomorphism。
于是这个名字就这么火了，而且到后来，Alexander Plyuto也在自己的作品后面加上了该风格的名称。
该风格使用CSS的实现方式
要实现这种风格，主要的样式在于一个白色的阴影 一个常规阴影。一个示例如下图所示：
在这个基础上，通过改变颜色和大小参数来达到不同效果。
而且经过我在网络上搜寻一番后，找到了有一些网站，已经可以生成这样的效果了。
通过颜色选取和大小等属性的控制，来达到自己想要的效果。
但是要自己实现的话，需要哪些步骤呢？
这里我们直接贴出代码，大家可以去实现一下。
代码语言：javascript复制<div class="drop-shadow"></div>
<div class="inner-shadow"></div>
<div class="inner-shadow-ring"></div>
<style>
body {
background: #ecf0f3;
}
div {
position: relative;
float: left;
width: 200px;
height: 200px;
margin-left: 80px;
margin-top: 80px;
background: #ecf0f3;
}
.drop-shadow {
border-radius: 20px;
box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
}
.inner-shadow {
border-radius: 20px;
box-shadow: inset 18px 18px 30px #d1d9e6, inset -18px -18px 30px #fff;
}
.inner-shadow-ring {
border-radius: 100%;
box-shadow: inset 9px 9px 15px #d1d9e6, inset -9px -9px 15px #fff;
}
.inner-shadow-ring:before {
content: "";
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
border-radius: 100%;
background: #ecf0f3;
box-shadow: 9px 9px 15px #d1d9e6, -9px -9px 15px #fff;
}
</style>代码和文章参考来源于网络：孟坤博客 https://mkblog.cn/2081/
