新拟态的英文名称是“Neumorphism”，是New+Skeuomorphism的组合词，同时也叫“Soft UI”。简单讲，新拟态是一种图形样式，其原理是通过模拟真实物体来为界面的UI元素赋予真实感。

在今年上半年，新拟态的UI设计风靡一时，它被誉为2020年最火的UI设计趋势之一，在互联网上广受欢迎。新拟态融合了拟态和平面设计技术，模仿真实物体的形态，为界面的UI元素赋予真实感，它是一种现实主义风格，也是非常值得探索的新设计风格。它时尚，细致，使用它进行设计确实很有趣。因此，在本文中，我将教大家如何使用CSS3来实现新拟态风格的UI元素，并且分享一些使用新拟态UI的网站实例。

新拟态风格起源于 dribbble（国际主流的设计作品分享平台）上一名叫 Alexander Plyuto 的设计师分享出来的一些设计作品。这些使用新拟态风格的作品之一，一路飙升至Dribbble 2019 年 POP 排行第一热门。

虽然当前新拟态风格非常火，但也仅仅局限于设计圈，距离正真落地应用还有很长一段路要走。国内许多大厂也都在进行新拟态UI的落地探索和尝试，在百度、腾讯等大厂的某些网页上，也能看到一些新拟态的身影。如 腾讯全球数字生态大会的网站。

最基础的「凸起效果」和「凹陷效果」，卡片要使用与页面的背景色相同的背景色，差别在于前者使用外投影，后者使用内投影。

效果展示

结合颜色