层叠维度Dimensional Layering
用四级阴影、模糊与 translateZ 建立清晰的 Z 轴秩序，悬停时图层浮起。层次可读但不过度装饰，适合复杂工作台。
典型场景设计工具 · 空间型后台 · 卡片流
编号46
年代2020s Modern
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
用四级阴影、模糊与 translateZ 建立清晰的 Z 轴秩序，悬停时图层浮起。层次可读但不过度装饰，适合复杂工作台。
关键词
Depthoverlappingz-indexlayers3Dshadowselevationfloatingcardsspatial hierarchy
效果与动效
z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax
设计系统变量
--elevation-10 1px 3px rgba(0,0,0,0.1)--elevation-20 4px 6px rgba(0,0,0,0.1)--elevation-30 10px 20px rgba(0,0,0,0.1)--elevation-40 20px 40px rgba(0,0,0,0.15)--blur-amount8px配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements
辅色 / Secondary
Shadow variations (sm/md/lg/xl), elevation colors, highlight colors for top layers
强调色在页面底色上的对比度约 5.1:1，可用于正文与图标。
适用场景
适合 / Best For
- Dashboards
- card layouts
- modals
- navigation
- product showcases
- SaaS interfaces
避开 / Do Not Use For
- Print-style layouts
- simple blogs
- low-end devices
- flat design requirements
框架兼容
tailwindmuichakra
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险高contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Layers clearly defined,
- Shadows show depth,
- Overlaps intentional,
- Hierarchy clear,
- Performance optimized,
- Mobile depth maintained
CSS / 技术关键词
z-index: 1-4 levels, box-shadow: elevation scale (sm/md/lg/xl), transform: translateZ(), backdrop-filter: blur(), position: relative for stacking, parallax on scroll
AI 提示词
Design with dimensional layering. Use: z-index depth (multiple layers), overlapping cards, elevation shadows (4 levels), floating elements, parallax depth, backdrop blur for hierarchy, spatial UI feel.