新拟态”的自定义解释在我的早起博客中

访问https://neumorphism.io 

几种常用样式 :

Neumorphism.io一个神奇的网站,满足各种圆角矩形ICON图表立体化效果要求,这种样式的名称——新拟态_自定义

border-radius: 50px;
background: #e0e0e0;
box-shadow: 20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;

Neumorphism.io一个神奇的网站,满足各种圆角矩形ICON图表立体化效果要求,这种样式的名称——新拟态_自定义_02

border-radius: 50px;
background: linear-gradient(145deg, #cacaca, #f0f0f0);
box-shadow: 20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;

 

Neumorphism.io一个神奇的网站,满足各种圆角矩形ICON图表立体化效果要求,这种样式的名称——新拟态_自定义_03

border-radius: 50px;
background: linear-gradient(145deg, #f0f0f0, #cacaca);
box-shadow: 20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;

Neumorphism.io一个神奇的网站,满足各种圆角矩形ICON图表立体化效果要求,这种样式的名称——新拟态_自定义_04

border-radius: 50px;
background: #e0e0e0;
box-shadow: inset 20px 20px 60px #bebebe,
inset -20px -20px 60px #ffffff;