前言：
现时咱们对“css切换主题 root”都比较看重，小伙伴们都需要分析一些“css切换主题 root”的相关文章。那么小编也在网上收集了一些有关“css切换主题 root””的相关资讯，希望咱们能喜欢，看官们一起来了解一下吧！拟物化、扁平化。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>CSS代码
: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);} 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css切换主题 root
