2020拟态设计搞半天没火起来，分享一下拟态css样
拟物化、扁平化。UI设计无论如何都会不断变化的，人的审美会疲劳，就连乔布斯的拟物化现在都被扁平化搞得裤衩都不剩了。
扁平化很简单，但是设计师已经不满足于此类审美了，在寻找新的设计。这不，新拟态开始出现，本来以为2020会火，结果到现在还没几个UI用新拟态设计风格。
如果你还不了解新拟态啥样子，不妨去看看百度图片搜索里找“新拟态”，或者能科学上网去外国网站看。
从UI代码编写角度来说，加了内发光外发光两唯独阴影，比扁平化页面代码编写还是麻烦了不少。
新拟态明亮主题 示例
新拟态黑暗主题 示例
赶潮流的我也研究了新拟态UI设计，也从国外网站学习研究，分享一下新拟态的css页面装饰代码。
很简单，就几行css，只需要新拟态风格的元素包裹就行了。还可以切换黑白主题！
下面是提炼出的核心样式！
HTML代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新拟态 UI</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="display">
拟态内容
</div>
<div data-theme="dark" class="display">
拟态内容
</div>
<div>
拟态设计内容
</div>
</body>
</html>
:root {
--body-bg-color: #e0e5ec;
--bg-color: #e0e5ec;
--primary-font-color: rgba(144,152,168,1);
--secondary-font-color: rgba(51,64,89,1);
--soft-high-light: rgba(255,255,255,.43);
--dark-high-light: rgba(217,210,200,.51);
}
[data-theme="dark"] {
--bg-color: #131419;
--primary-font-color: #c7c7c7;
--secondary-font-color: #03a9f4;
--soft-high-light: rgba(255,255,255,.05);
--dark-high-light: rgba(0,0,0,.51);
}
body {
background: var(--body-bg-color);
color: var(--primary-font-color);
}
.display {
box-shadow: 6px 6px 16px 0 var(--dark-high-light), -6px -6px 16px 0 var(--soft-high-light), inset 6px 6px 5px 0 var(--dark-high-light), inset -6px -6px 5px 0 var(--soft-high-light);
border: 5px solid var(--soft-high-light);
color: var(--secondary-font-color);
}