Material Web 组件之 Elevation 完全指南：用 `＜md-elevation＞` 实现 0-5 级阴影体系

UI组件前端设计系统【免费下载链接】material-webMaterial Design Web Components项目地址https://gitcode.com/gh_mirrors/ma/material-web点击查看免费下载Elevation高度是 Material Design 中两个表面沿 z 轴方向的相对距离Material Web Components 通过md-elevation自定义元素与--md-elevation-levelCSS 自定义属性把 M3 的六档阴影体系0~5完整落地到 Web 平台。读完本篇你将掌握如何用一行标记为任意容器自动铺满的投影、通过 transition 属性在悬停/按压等交互状态间平滑切换阴影、如何用颜色 token 定制阴影色并理解底层双阴影合成key ambient shadow的实现原理。Elevation 是什么根据 M3 规范 的定义Elevation 是两个表面沿 z 轴垂直于屏幕的方向的相对距离。Material 的阴影系统被刻意限制为只有少数几个档位这一创意约束迫使你在设计 UI 的阴影叙事elevation story时做出深思熟虑的取舍而不是随意堆砌阴影。Material 使用六档高度等级每档对应一个 dp密度无关像素数值命名反映了元素相对 UI 表面的距离0、1、2、3、4、5。其中元素的静止resting状态可以使用 0 到 3 级而4 和 5 级专门保留给用户交互状态例如 hover悬停和 dragged拖拽。这意味着你应当把最高的两级高度当作交互反馈手段而不是让普通静态卡片常年停留在高位。在 Material Web Components 中这一套体系由一个轻量的自定义元素承载// elevation/elevation.ts customElement(md-elevation) export class MdElevation extends Elevation { static override styles: CSSResultOrNative[] [styles]; }元素内部实现非常精简internal/elevation.ts 只做两件事在connectedCallback里设置aria-hiddentrue避免 VoiceOver 把它识别为与内容并列的分组并渲染出一个span classshadow作为阴影承载节点。也就是说md-elevation本身没有任何可见内容纯粹是一层可感知的投影层。基础用法为任意表面添加高度Elevation 可以通过--md-elevation-levelCSS 自定义属性在 0 到 5 之间取值。投影会自动填满最近的position: relative元素的尺寸与形状圆角会被继承。style .surface { position: relative; border-radius: 16px; height: 64px; width: 64px; --md-elevation-level: 3; } /style div classsurface md-elevation/md-elevation !-- Content -- /div使用上有三个关键点宿主必须有定位上下文阴影节点通过position: absolute; inset: 0铺满而它的定位基准是最近的position: relative祖先因此承载表面必须设置position: relative源码见 internal/_elevation.scss 中的:host, .shadow, .shadow::before, .shadow::after样式块。圆角自动继承阴影使用border-radius: inherit所以只要给宿主设置圆角阴影就会跟随宿主形状每档阴影的具体圆角是否叠加由 Material 规范决定本组件实现中直接继承宿主的圆角值。md-elevation可以出现在内容任意位置组件使用display: flex; pointer-events: none不会拦截鼠标事件也不会影响内容的可点击性。从源码的阴影公式internal/_elevation.scss可以看到阴影是两层 box-shadow 合成的.shadow::before为key shadow主投影opacity: 0.3负责给出物体的着地感.shadow::after为ambient shadow环境投影opacity: 0.15负责大范围的环境光晕。每档等级对应的 key shadow 目标值源码注释中给出为LevelKey box-shadowAmbient box-shadow00px 0px 0px 0px0px 0px 0px 0px10px 1px 2px 0px0px 1px 3px 1px20px 1px 2px 0px0px 2px 6px 2px30px 1px 3px 0px0px 4px 8px 3px40px 2px 3px 0px0px 6px 10px 4px50px 4px 4px 0px0px 8px 12px 6px实现上Sass 用一组clamp(0, var(--_level) - N, M)的分段函数把连续的--_level映射到离散的 y / blur / spread 值再乘以1px得到最终 box-shadow。这种用 CSS 计算把 0~5 离散值换算成阴影参数的手法正是组件支持动画的关键——因为阴影参数是直接由 CSS 变量实时推导的改变--md-elevation-level时无需重建任何样式。动画在高度等级间平滑过渡在表面切换高度等级时可以给宿主添加transition-duration与transition-easing-function或transition-timing-function属性阴影就会平滑过渡。组件内部已经把transition-duration、transition-property、transition-timing-function全部设置为inherit因此宿主上的过渡设置会被阴影层完整继承。style .surface { /* ... */ transition-duration: 250ms; transition-timing-function: ease-in-out; --md-elevation-level: 3; } .surface:active { --md-elevation-level: 0; } /style div classsurface md-elevation/md-elevation !-- Content -- /div要点说明组件默认在:host与.shadow::before/::after上设置transition-property: box-shadow, opacity确保只有阴影相关的属性参与过渡避免不必要的重排上面示例利用:active状态实现按压时降至 0 级的物理反馈这正符合 M3 中静止状态 0~3、交互状态 4~5的用法延伸——反过来hover 时升到 4/5 也同样是推荐的交互模式过渡时长如 250ms与缓动函数如 ease-in-out完全由你在宿主上控制组件不做硬编码。仓库的演示代码也验证了这一模式elevation/demo/stories.ts 中每个 demo 盒子都设置了transition-duration: 250ms; transition-timing-function: ease-in-out;而 elevation/demo/demo.ts 通过levelknob 让你可以在 0~5 之间实时拖动切换渲染时用Math.min(Math.max(level, 0), 5)把输入夹在合法区间内直观观察阴影过渡效果。无障碍Elevation 是一个纯视觉组件不承载任何语义与交互信息因此没有无障碍方面的顾虑。组件实现中唯一与无障碍相关的处理是在挂载时为自身设置aria-hiddentrue避免屏幕阅读器把阴影层误读为内容分组源码注释见 internal/elevation.ts。在使用时你无需为投影层提供任何 ARIA 属性或替代文本。Theming用 Material 主题定制阴影Elevation 支持 Material theming可以从颜色维度进行定制。它遵循与其它组件一致的 token 体系Sass 侧见 elevation/_elevation.scss 的forward ./internal/elevation show theme样式侧见 internal/_elevation.scss 的theme($tokens)mixin支持且仅支持两个 tokenToken默认值--md-elevation-level0--md-elevation-shadow-color--md-sys-color-shadow这两个 token 的定义来自 tokens/_md-comp-elevation.scsslevel取自md-sys-elevation.level0默认即为 0对应无投影shadow-color取自md-sys-color.shadow也就是系统色板中的 shadow 色tokens/_md-sys-color.scss 中注册的shadowtoken默认通常接近黑色。值得留意的是tokens/_md-sys-elevation.scss 中有一处针对 Web 平台的特殊处理注释明确指出Web 端的高度等级应使用等级数字而非 dp 值level0~level5 被映射为整数 0~5这正是你在页面上看到--md-elevation-level: 3而不是12dp之类写法level3 对应的 dp 值的原因。主题化示例自定义阴影颜色style .surface { position: relative; border-radius: 16px; height: 64px; width: 64px; } :root { --md-elevation-level: 5; --md-sys-color-shadow: #006A6A; } /style div classsurface md-elevation/md-elevation !-- Content -- /div这个例子做了两件事通过:root把--md-elevation-level提升到 5所有表面默认获得最高级投影把系统 token--md-sys-color-shadow覆盖为青绿色#006A6A让阴影呈现品牌色。因为组件样式中的阴影颜色读取的是var(--_shadow-color)而_shadow-color又回落到var(--md-elevation-shadow-color, ...)最终落到--md-sys-color-shadow所以在:root覆盖任何一个环节都能全局生效——这也解释了为何示例中只需要改--md-sys-color-shadow一个变量。若只想改变单个表面的阴影色把--md-elevation-shadow-color直接写在对应类上即可。若使用 Sass 构建还可以通过组件暴露的theme($tokens)mixin 以编程方式注入 token// 需要引入 tokens 模块与 elevation 模块 // use material-web/tokens; // use material-web/elevation; // .surface { include elevation.theme((level: 5, shadow-color: #006A6A)); }thememixin 的 token 白名单定义在 tokens/_md-comp-elevation.scss 的$supported-tokens中传入白名单之外的 token 会在编译期直接error报错。API 一览md-elevation的公共 API 极为精简不暴露任何属性property、属性attribute与方法所有能力都通过 CSS 自定义属性对外提供--md-elevation-level取整数值 0~5控制高度等级默认0--md-elevation-shadow-color控制阴影颜色默认引用--md-sys-color-shadow。配合使用的还有宿主上的两个标准 CSS 属性transition-duration与transition-easing-function组件用transition-timing-function的inherit完成继承用于开启阴影动画。测试方面elevation/elevation_test.ts 通过createTokenTests(MdElevation.styles)对组件的样式 token 做一致性校验确保暴露的 token 与主题体系声明保持一致。总结是 M3 六档高度体系的 Web 实现用--md-elevation-level: 0~5控制自动铺满并继承最近position: relative宿主的尺寸与圆角静止用低档0~3交互用高档4~5这是 Material 对高度体系的创造性约束也是最容易出彩的设计决策点动画零成本给宿主加transition-duration/transition-easing-function配合状态切换改变--md-elevation-level即可获得流畅的阴影过渡因为底层阴影参数由 CSS 变量实时推导主题化只碰颜色两个 token 中--md-elevation-shadow-color默认指向--md-sys-color-shadow改一个系统变量即可全局换色纯视觉、零负担组件不拦截事件、无无障碍问题天然适合作为任意表面的一层投影叠加层。赞分享UI组件前端设计系统【免费下载链接】material-webMaterial Design Web Components项目地址https://gitcode.com/gh_mirrors/ma/material-web点击查看免费下载相关推荐Material Components Web Elevation 指南阴影体系、Sass Mixin 与 Elevation Overlay 实战Material Components Web Elevation 指南阴影体系、Sass Mixin 与 Elevation Overlay 实战 本文围绕前端UI组件设计系统超实用Markdown-Cheatsheet图片技巧主题适配与排版进阶指南超实用Markdown Cheatsheet图片技巧主题适配与排版进阶指南 Markdown Cheatsheet是一款终极的Markdown语法参考工具提如何掌握Material Design Lite阴影系统Elevation与Depth设计终极指南如何掌握Material Design Lite阴影系统Elevation与Depth设计终极指南 Material Design Lite是一个轻量级的前端前端UI组件上一篇capa入门教程5步学会分析可疑可执行文件下一篇Awesome Go的CQRS模式命令查询职责分离创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考