看腻了扁平化新拟态Neumorphism用柔和的光影效果让界面浮起来本文分享如何用 Vue 3 CSS 变量落地一套完整的新拟态组件库。什么是新拟态新拟态Neumorphism是一种 UI 设计风格核心特征是元素与背景同色通过亮面阴影和暗面阴影制造凸起或凹陷的错觉视觉上柔和、克制有一种从界面中长出来的质感介于扁平化和拟物化之间兼具现代感和触感典型效果设计原则在 WATools 中我遵循了以下设计原则背景色统一所有组件共享同一个背景色变量--neu-bg双色阴影每个凸起元素同时有亮面和暗面两个box-shadow状态反馈点击时阴影反转凸起 → 凹陷提供触觉反馈主题适配所有颜色通过 CSS 变量定义切换主题零成本CSS 变量体系:root { /* 基础背景色 */ --neu-bg: #e0e5ec; /* 阴影颜色 */ --neu-shadow-dark: rgba(163, 177, 198, 0.6); --neu-shadow-light: rgba(255, 255, 255, 0.8); /* 圆角 */ --neu-radius: 12px; /* 文字颜色 */ --neu-text: #4a5568; --neu-text-secondary: #718096; /* 主题强调色 */ --neu-primary: #667eea; }组件实现示例NeuButton - 新拟态按钮核心样式.neu-button { background: var(--neu-bg); border: none; border-radius: var(--neu-radius); box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); transition: all 0.2s ease; } .neu-button:active { box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light); }Vue 组件封装template button classneu-button :class{ active: isActive } slot / /button /template script setup langts defineProps{ isActive?: boolean }() /scriptNeuCard - 新拟态卡片.neu-card { background: var(--neu-bg); border-radius: 16px; box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light); padding: 24px; }NeuInput - 新拟态输入框输入框采用凹陷效果表示这是一个可填入内容的区域.neu-input { background: var(--neu-bg); border: none; border-radius: var(--neu-radius); box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light); padding: 12px 16px; color: var(--neu-text); }多主题方案WATools 内置了 6 套主题每套主题只需覆盖 CSS 变量主题关键特征 樱花粉色调温柔甜美 薰衣草紫色调优雅梦幻 薄荷绿色调清新自然 海风蓝色调清爽通透 星空深色调神秘沉静 日落橙色调温暖活力主题切换的实现非常简洁——在 Pinia store 中记录当前主题名动态加载对应的 CSS 文件所有组件因为使用 CSS 变量自动完成样式跟随。组件库目录结构components/neu/ ├── NeuButton.vue ├── NeuCard.vue ├── NeuInput.vue ├── NeuSelect.vue ├── NeuSwitch.vue ├── NeuTabs.vue ├── NeuTag.vue └── NeuTextarea.vue每个组件都是独立的单文件组件SFC按需引入零耦合。踩坑记录阴影层次感新拟态的关键是双色阴影只用一个box-shadow会显得扁平暗色主题适配深色背景下阴影不明显需要调整阴影策略使用边框或发光效果替代可访问性新拟态的对比度容易偏低文字颜色要确保 WCAG 2.0 标准性能box-shadow不会触发重排但大量阴影叠加时注意 GPU 加速写在最后新拟态不是万能的设计风格但对于工具类应用来说它能提供一种精致而不花哨的视觉体验。WATools 的完整组件库源码已开源欢迎来 GitCode 查看和参考。觉得有帮助的话点个 Star 支持一下