文章目录
前言基础说明更多示例新拟物风格按钮暗色新拟物风格卡片新拟物风格单选按钮总结前言
新拟物风格（Neumorphism）是前两年兴起的一种设计风格，这个风格虽然因为特征上的一些问题没有流行开来，但是单从视觉角度来说好看是真的好看。这篇文章将对在前端中使用新拟物风格的设计与实现做个简单介绍。
基础说明
新拟物风格的设计其实蛮简单，所有的组件都是在它所依附的背景上凸出或凹陷，光源从侧面照射，这样该组件四周就会产生一片高光区域和一片阴影区域。根据这个原理在前端页面中实现新拟物风格组件其实挺简单，只要控制两点：
组件和其父容器背景色要相同或相近；使用box-shadow制造一片比背景色稍亮的阴影和一片比背景色稍暗的阴影；
下面是个简单的示例：
到此为止基本上在前端中实现新拟物风格的方法就已经介绍完了。这里再介绍一个方便的工具，可以方便的调节颜色光照等，可以实时预览，并且可以生成代码：
https://neumorphism.io/
更多示例
新拟物风格按钮
<!DOCTYPE html><html><head><meta charset="UTF-8"><style>html,body {padding: 0;margin: 0;width: 100vw;height: 100vh;display: grid;place-items: center;background-color: #e6e6e6;}.neumorphism {width: 200px;height: 75px;border: none;border-radius: 20px;background-color: #e6e6e6;box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff; }.neumorphism:active {box-shadow: inset 5px 5px 10px #bbbbbb, inset -5px -5px 10px #ffffff;}.neumorphism:focus {outline: none;}.neumorphism span {display: block;user-select: none;color: #a6a6a6;font-size: 24px;text-align: center;line-height: 75px;transition: 0.1s;}.neumorphism:active span {transform: scale(0.95);}</style></head><body><button class="neumorphism"><span>BUTTON</span></button></body></html>
暗色新拟物风格卡片
新拟物风格单选按钮
<!DOCTYPE html><html><head><meta charset="UTF-8"><style>body {width: 100vw;height: 100vh;padding: 0;margin: 0;display: grid;place-items: center;background-color: #e6e6e6;}.neumorphism label input {appearance: none;}.neumorphism label div {margin: 0.5rem;display: inline-block;width: 4rem;height: 4rem;border-radius: 50%;background-color: #e6e6e6;box-shadow: 0.2rem 0.2rem 0.6rem #c4c4c4, -0.2rem -0.2rem 0.6rem #ffffff;}/* 设置在input选中时其后面的div */.neumorphism label input:checked+div {box-shadow: inset 0.2rem 0.2rem 0.6rem #c4c4c4, inset -0.2rem -0.2rem 0.6rem #ffffff;}.neumorphism label div span {display: block;user-select: none;color: #a6a6a6;text-align: center;line-height: 4rem;transition: 0.1s;}.neumorphism label input:checked+div span {transform: scale(0.95);}</style></head><body><div class="neumorphism"><!-- label标签会将下面input和div绑定，选中div即选中input --><label><input type="radio" name="bool" /><div><span>True</span></div></label><label><input type="radio" name="bool" /><div><span>False</span></div></label></div></body></html>
总结
从代码角度来说在前端页面中实现新拟物风格挺简单的，不过从设计角度来说需要考虑的东西其实挺多的，更多内容可以参考下面文章：
《设计风格讲解之——新拟物风格Neumorphism》
