Material Design Lite 阴影Shadow效果完全指南从 2dp 到 24dp 的 MDL 阴影类详解【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite阴影Shadow是 Material Design LiteMDL中一个非常特殊的能力——它不是一个像卡片Card、菜单Menu或文本框Textfield那样的独立组件而是一种可以附加到任意 UI 元素上的视觉特效。本文以 src/shadow/README.md 为骨架结合仓库内 _shadow.scss、_mixins.scss、_variables.scss 等源码实现系统讲解 MDL 阴影的原理、全部预设类、使用步骤与底层实现帮助你在一张卡片、一个弹层或任意上快速获得规范、自然的浮起效果。什么是 MDL Shadow不是组件而是一种视觉特效在 MDL 中阴影效果模拟的是元素在三维空间中的位置——仿佛它被轻微抬离了所在的平面用 UI 术语来说就是拥有一个正的z 轴z-axis高度值。阴影从元素边缘开始向外逐渐淡出从而形成逼真的三维立体观感。从使用与认知上看阴影的价值体现在三个方面区分元素阴影是区分元素与其周围环境最直观、最自然的手段引导视线阴影能把用户的注意力吸引到某个对象上强调该对象的重要性、独特性或紧迫性提供可用性暗示阴影在用户界面中由来已久它向用户传递这个对象可以被如何使用、其价值几何的视觉线索是整体用户体验的重要组成部分。在 MDL 中阴影只依赖 CSS 类即可生效不需要任何 JavaScript 初始化或componentHandler.upgradeElement调用。从仓库结构看src/shadow/ 目录下只有样式文件_shadow.scss、演示页面demo.html、demo.css与本文档没有任何.js组件文件这与 Card、Menu 等组件形成了鲜明对比——这正印证了阴影是样式特效而非组件的定位。快速上手三步为元素添加 MDL 阴影使用 MDL 阴影非常简单核心就是写一个元素 加一个类名。官方文档给出了两个步骤第 1 步编写要接收阴影效果的元素。可以是div等任意元素先按需设置尺寸与样式并放入内容div Some content /div第 2 步通过class属性为元素添加 MDL 阴影类。例如添加mdl-shadow--4dp即可获得一个中等强度的阴影div classmdl-shadow--4dp Some content /div至此这个带阴影的元素就可以直接使用了。官方示例给一个自定义了类的 div 加上小阴影div classmy-shadow-card mdl-shadow--2dpSmall shadow/div给一个自定义了类的 div 加上中偏大的阴影div classmy-shadow-card mdl-shadow--6dpMedium-large shadow/div注意这里的my-shadow-card只是示例中由用户自定义的样式类用于控制背景色、圆角、内边距等外观真正产生阴影的是mdl-shadow--*类。你可以参考仓库中 src/shadow/demo.css 里.demo-shadow-card的写法白色背景、2px 圆角、flex 居中、带 transition把阴影类与自己的卡片样式自由组合.demo-shadow-card { background-color: #fff; border-radius: 2px; display: block; height: 72px; padding: 10px; text-align: center; color: #9E9E9E; display: flex; align-items: center; justify-content: center; width: 72px; }配置选项七种预设阴影类MDL 通过一组 CSS 类向元素施加预定义好的阴影。官方文档给出的配置表如下MDL 类效果备注mdl-shadow--2dp为对象赋予小阴影可选省略则无阴影mdl-shadow--3dp为对象赋予中偏小的阴影可选省略则无阴影mdl-shadow--4dp为对象赋予中等阴影可选省略则无阴影mdl-shadow--6dp为对象赋予中偏大的阴影可选省略则无阴影mdl-shadow--8dp为对象赋予大阴影可选省略则无阴影mdl-shadow--16dp为对象赋予超大阴影可选省略则无阴影需要特别指出的是官方 README 的表格并没有穷尽仓库中实际存在的阴影类。查看 src/shadow/_shadow.scss 源码可以发现除了上述 6 个类之外样式文件还额外定义了mdl-shadow--24dp.mdl-shadow--2dp { include shadow-2dp(); } .mdl-shadow--3dp { include shadow-3dp(); } .mdl-shadow--4dp { include shadow-4dp(); } .mdl-shadow--6dp { include shadow-6dp(); } .mdl-shadow--8dp { include shadow-8dp(); } .mdl-shadow--16dp { include shadow-16dp(); } .mdl-shadow--24dp { include shadow-24dp(); }也就是说mdl-shadow--24dp是一个文档之外、源码之内的可用类它提供最强的浮起效果例如 src/dialog/_dialog.scss 中的对话框就使用了 24dp 阴影。类名中的数字2、3、4、6、8、16、24即 MDL/Material Design 中描述抬升高度elevation的dpdensity-independent pixels值。数字越大元素看起来离平面越远阴影的扩散范围与模糊程度也越大。源码级原理三层 box-shadow 与四个透明度变量MDL 阴影的全部秘密都藏在 src/_mixins.scss 的 Shadows 段落中。每一个shadow-Ndp()mixin 都输出一条由三组阴影叠加而成的box-shadow分别对应 Material Design 明暗系统中的三种成分Key Umbra关键阴影/本影主光源直射产生的深色阴影紧贴物体底部Key Penumbra关键半影主光源被物体部分遮挡后在周围形成的过渡阴影Ambient Shadow环境阴影环境光从四面八方照射产生的均匀、扩散的淡阴影。三者的默认透明度定义在 src/_variables.scss$shadow-key-umbra-opacity: 0.2 !default; $shadow-key-penumbra-opacity: 0.14 !default; $shadow-ambient-shadow-opacity: 0.12 !default;以最小的shadow-2dp为例其完整定义为mixin shadow-2dp() { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); }各档位阴影的 box-shadow 完整参数三层依次为 penumbra / umbra / ambient整理如下便于对照与自定义类第 1 层penumbra第 2 层umbra第 3 层ambientmdl-shadow--2dp0 2px 2px 00 3px 1px -2px0 1px 5px 0mdl-shadow--3dp0 3px 4px 00 3px 3px -2px0 1px 8px 0mdl-shadow--4dp0 4px 5px 00 2px 4px -1px0 1px 10px 0mdl-shadow--6dp0 6px 10px 00 3px 5px -1px0 1px 18px 0mdl-shadow--8dp0 8px 10px 1px0 5px 5px -3px0 3px 14px 2pxmdl-shadow--16dp0 16px 24px 2px0 8px 10px -5px0 6px 30px 5pxmdl-shadow--24dp0 9px 46px 8px0 24px 38px 3px0 11px 15px -7px以上均为黑色rgba(0,0,0, 对应透明度变量)透明度取_variables.scss中的默认值。观察这些数值可以发现 MDL 的设计手法随着 dp 增大三组阴影的偏移量y 值、模糊半径blur与扩散半径spread同步增大让阴影既更远又更柔和同时各层参数并非简单等比放大而是经过了精细的调校这正是 MDL 阴影看起来自然、接近真实光照的原因。除了七档高度阴影_mixins.scss 中还定义了focus-shadowmixin用于聚焦态提示mixin focus-shadow() { box-shadow: 0 0 8px rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.36); }自定义方式由于透明度变量都带!default标记你可以在引入 MDL 样式之前重新声明它们例如把 umbra 调浓为0.25从而全局调整所有阴影的浓度但各档位的偏移与模糊参数目前固化在 mixin 中需要时可直接复制 _mixins.scss 中的定义自行覆写。编译入口与在真实组件中的应用阴影样式通过 MDL 的主样式入口 src/material-design-lite.scss 中的import shadow/shadow;被编译进完整版 CSS。也就是说只要你引入 MDL 的完整样式文件mdl-shadow--*七个类就全部可用如果使用 Sass 按需编译也只需额外引入shadow/shadow这一个文件它内部会自行import ../variables与import ../mixins。阴影在 MDL 内部组件中有着大量实际应用从源码可以确认按钮Buttonsrc/button/_button.scss 中mdl-button--raised悬浮按钮通过include shadow-2dp()获得默认抬升感对话框Dialogsrc/dialog/_dialog.scss 使用include shadow-24dp让模态层在所有内容之上有最强的层级感菜单Menu、Chip、Switch、Layout等组件的样式中同样引用了 shadow mixin 或阴影类用于表达弹出层、可交互 Chip、滑块与导航的层次关系可在 src/menu/_menu.scss、src/chip/_chip.scss、src/switch/_switch.scss、src/layout/_layout.scss 中检索shadow确认。这说明mdl-shadow--*类不仅面向终端用户开放也是 MDL 内部组件实现层级感的基础设施。实践建议如何选择 dp 值以及官方的演示页仓库在 src/shadow/demo.html 中提供了可直接预览的演示片段——一行排开 2dp 到 16dp 的六张 72×72 阴影卡片配合 src/shadow/demo.css 的样式即可直观对比各档位差异div classdemo-preview-block demo-page--shadow div classdemo-shadow-card mdl-shadow--2dp2dp/div div classdemo-shadow-card mdl-shadow--3dp3dp/div div classdemo-shadow-card mdl-shadow--4dp4dp/div div classdemo-shadow-card mdl-shadow--6dp6dp/div div classdemo-shadow-card mdl-shadow--8dp8dp/div div classdemo-shadow-card mdl-shadow--16dp16dp/div /div选档建议与 Material Design 的抬升层级语义一致可从 mixin 的数值递增规律与组件用法印证2dp3dp常规卡片、静态内容块表达轻微浮起MDL 的悬浮按钮raised button即用 2dp4dp6dp需要稍强区分的卡片、悬浮操作元素适合中等层级的强调8dp16dp下拉菜单、弹出层、浮层面板等临时性 UI视觉上明显高于页面主体16dp24dp模态对话框、抽屉等必须压过全部内容的最高层级对象MDL 对话框用 24dp。最后提醒两点使用细节阴影是纯 CSS 特效无需引入任何 JS也没有upgradeElement/downgradeElement的概念只要元素在页面上、类名拼写正确即生效与自定义样式组合时阴影类只负责box-shadow不会影响元素的尺寸、背景或布局因此可以放心叠加到任何已有的 class 上如官方示例中的my-shadow-card这也是它在 MDL 中被定义为效果而非组件的根本原因——它天生就是可组合的。【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Material Design Lite 阴影（Shadow）效果完全指南：从 2dp 到 24dp 的 MDL 阴影类详解
Material Design Lite 阴影Shadow效果完全指南从 2dp 到 24dp 的 MDL 阴影类详解【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite阴影Shadow是 Material Design LiteMDL中一个非常特殊的能力——它不是一个像卡片Card、菜单Menu或文本框Textfield那样的独立组件而是一种可以附加到任意 UI 元素上的视觉特效。本文以 src/shadow/README.md 为骨架结合仓库内 _shadow.scss、_mixins.scss、_variables.scss 等源码实现系统讲解 MDL 阴影的原理、全部预设类、使用步骤与底层实现帮助你在一张卡片、一个弹层或任意上快速获得规范、自然的浮起效果。什么是 MDL Shadow不是组件而是一种视觉特效在 MDL 中阴影效果模拟的是元素在三维空间中的位置——仿佛它被轻微抬离了所在的平面用 UI 术语来说就是拥有一个正的z 轴z-axis高度值。阴影从元素边缘开始向外逐渐淡出从而形成逼真的三维立体观感。从使用与认知上看阴影的价值体现在三个方面区分元素阴影是区分元素与其周围环境最直观、最自然的手段引导视线阴影能把用户的注意力吸引到某个对象上强调该对象的重要性、独特性或紧迫性提供可用性暗示阴影在用户界面中由来已久它向用户传递这个对象可以被如何使用、其价值几何的视觉线索是整体用户体验的重要组成部分。在 MDL 中阴影只依赖 CSS 类即可生效不需要任何 JavaScript 初始化或componentHandler.upgradeElement调用。从仓库结构看src/shadow/ 目录下只有样式文件_shadow.scss、演示页面demo.html、demo.css与本文档没有任何.js组件文件这与 Card、Menu 等组件形成了鲜明对比——这正印证了阴影是样式特效而非组件的定位。快速上手三步为元素添加 MDL 阴影使用 MDL 阴影非常简单核心就是写一个元素 加一个类名。官方文档给出了两个步骤第 1 步编写要接收阴影效果的元素。可以是div等任意元素先按需设置尺寸与样式并放入内容div Some content /div第 2 步通过class属性为元素添加 MDL 阴影类。例如添加mdl-shadow--4dp即可获得一个中等强度的阴影div classmdl-shadow--4dp Some content /div至此这个带阴影的元素就可以直接使用了。官方示例给一个自定义了类的 div 加上小阴影div classmy-shadow-card mdl-shadow--2dpSmall shadow/div给一个自定义了类的 div 加上中偏大的阴影div classmy-shadow-card mdl-shadow--6dpMedium-large shadow/div注意这里的my-shadow-card只是示例中由用户自定义的样式类用于控制背景色、圆角、内边距等外观真正产生阴影的是mdl-shadow--*类。你可以参考仓库中 src/shadow/demo.css 里.demo-shadow-card的写法白色背景、2px 圆角、flex 居中、带 transition把阴影类与自己的卡片样式自由组合.demo-shadow-card { background-color: #fff; border-radius: 2px; display: block; height: 72px; padding: 10px; text-align: center; color: #9E9E9E; display: flex; align-items: center; justify-content: center; width: 72px; }配置选项七种预设阴影类MDL 通过一组 CSS 类向元素施加预定义好的阴影。官方文档给出的配置表如下MDL 类效果备注mdl-shadow--2dp为对象赋予小阴影可选省略则无阴影mdl-shadow--3dp为对象赋予中偏小的阴影可选省略则无阴影mdl-shadow--4dp为对象赋予中等阴影可选省略则无阴影mdl-shadow--6dp为对象赋予中偏大的阴影可选省略则无阴影mdl-shadow--8dp为对象赋予大阴影可选省略则无阴影mdl-shadow--16dp为对象赋予超大阴影可选省略则无阴影需要特别指出的是官方 README 的表格并没有穷尽仓库中实际存在的阴影类。查看 src/shadow/_shadow.scss 源码可以发现除了上述 6 个类之外样式文件还额外定义了mdl-shadow--24dp.mdl-shadow--2dp { include shadow-2dp(); } .mdl-shadow--3dp { include shadow-3dp(); } .mdl-shadow--4dp { include shadow-4dp(); } .mdl-shadow--6dp { include shadow-6dp(); } .mdl-shadow--8dp { include shadow-8dp(); } .mdl-shadow--16dp { include shadow-16dp(); } .mdl-shadow--24dp { include shadow-24dp(); }也就是说mdl-shadow--24dp是一个文档之外、源码之内的可用类它提供最强的浮起效果例如 src/dialog/_dialog.scss 中的对话框就使用了 24dp 阴影。类名中的数字2、3、4、6、8、16、24即 MDL/Material Design 中描述抬升高度elevation的dpdensity-independent pixels值。数字越大元素看起来离平面越远阴影的扩散范围与模糊程度也越大。源码级原理三层 box-shadow 与四个透明度变量MDL 阴影的全部秘密都藏在 src/_mixins.scss 的 Shadows 段落中。每一个shadow-Ndp()mixin 都输出一条由三组阴影叠加而成的box-shadow分别对应 Material Design 明暗系统中的三种成分Key Umbra关键阴影/本影主光源直射产生的深色阴影紧贴物体底部Key Penumbra关键半影主光源被物体部分遮挡后在周围形成的过渡阴影Ambient Shadow环境阴影环境光从四面八方照射产生的均匀、扩散的淡阴影。三者的默认透明度定义在 src/_variables.scss$shadow-key-umbra-opacity: 0.2 !default; $shadow-key-penumbra-opacity: 0.14 !default; $shadow-ambient-shadow-opacity: 0.12 !default;以最小的shadow-2dp为例其完整定义为mixin shadow-2dp() { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); }各档位阴影的 box-shadow 完整参数三层依次为 penumbra / umbra / ambient整理如下便于对照与自定义类第 1 层penumbra第 2 层umbra第 3 层ambientmdl-shadow--2dp0 2px 2px 00 3px 1px -2px0 1px 5px 0mdl-shadow--3dp0 3px 4px 00 3px 3px -2px0 1px 8px 0mdl-shadow--4dp0 4px 5px 00 2px 4px -1px0 1px 10px 0mdl-shadow--6dp0 6px 10px 00 3px 5px -1px0 1px 18px 0mdl-shadow--8dp0 8px 10px 1px0 5px 5px -3px0 3px 14px 2pxmdl-shadow--16dp0 16px 24px 2px0 8px 10px -5px0 6px 30px 5pxmdl-shadow--24dp0 9px 46px 8px0 24px 38px 3px0 11px 15px -7px以上均为黑色rgba(0,0,0, 对应透明度变量)透明度取_variables.scss中的默认值。观察这些数值可以发现 MDL 的设计手法随着 dp 增大三组阴影的偏移量y 值、模糊半径blur与扩散半径spread同步增大让阴影既更远又更柔和同时各层参数并非简单等比放大而是经过了精细的调校这正是 MDL 阴影看起来自然、接近真实光照的原因。除了七档高度阴影_mixins.scss 中还定义了focus-shadowmixin用于聚焦态提示mixin focus-shadow() { box-shadow: 0 0 8px rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.36); }自定义方式由于透明度变量都带!default标记你可以在引入 MDL 样式之前重新声明它们例如把 umbra 调浓为0.25从而全局调整所有阴影的浓度但各档位的偏移与模糊参数目前固化在 mixin 中需要时可直接复制 _mixins.scss 中的定义自行覆写。编译入口与在真实组件中的应用阴影样式通过 MDL 的主样式入口 src/material-design-lite.scss 中的import shadow/shadow;被编译进完整版 CSS。也就是说只要你引入 MDL 的完整样式文件mdl-shadow--*七个类就全部可用如果使用 Sass 按需编译也只需额外引入shadow/shadow这一个文件它内部会自行import ../variables与import ../mixins。阴影在 MDL 内部组件中有着大量实际应用从源码可以确认按钮Buttonsrc/button/_button.scss 中mdl-button--raised悬浮按钮通过include shadow-2dp()获得默认抬升感对话框Dialogsrc/dialog/_dialog.scss 使用include shadow-24dp让模态层在所有内容之上有最强的层级感菜单Menu、Chip、Switch、Layout等组件的样式中同样引用了 shadow mixin 或阴影类用于表达弹出层、可交互 Chip、滑块与导航的层次关系可在 src/menu/_menu.scss、src/chip/_chip.scss、src/switch/_switch.scss、src/layout/_layout.scss 中检索shadow确认。这说明mdl-shadow--*类不仅面向终端用户开放也是 MDL 内部组件实现层级感的基础设施。实践建议如何选择 dp 值以及官方的演示页仓库在 src/shadow/demo.html 中提供了可直接预览的演示片段——一行排开 2dp 到 16dp 的六张 72×72 阴影卡片配合 src/shadow/demo.css 的样式即可直观对比各档位差异div classdemo-preview-block demo-page--shadow div classdemo-shadow-card mdl-shadow--2dp2dp/div div classdemo-shadow-card mdl-shadow--3dp3dp/div div classdemo-shadow-card mdl-shadow--4dp4dp/div div classdemo-shadow-card mdl-shadow--6dp6dp/div div classdemo-shadow-card mdl-shadow--8dp8dp/div div classdemo-shadow-card mdl-shadow--16dp16dp/div /div选档建议与 Material Design 的抬升层级语义一致可从 mixin 的数值递增规律与组件用法印证2dp3dp常规卡片、静态内容块表达轻微浮起MDL 的悬浮按钮raised button即用 2dp4dp6dp需要稍强区分的卡片、悬浮操作元素适合中等层级的强调8dp16dp下拉菜单、弹出层、浮层面板等临时性 UI视觉上明显高于页面主体16dp24dp模态对话框、抽屉等必须压过全部内容的最高层级对象MDL 对话框用 24dp。最后提醒两点使用细节阴影是纯 CSS 特效无需引入任何 JS也没有upgradeElement/downgradeElement的概念只要元素在页面上、类名拼写正确即生效与自定义样式组合时阴影类只负责box-shadow不会影响元素的尺寸、背景或布局因此可以放心叠加到任何已有的 class 上如官方示例中的my-shadow-card这也是它在 MDL 中被定义为效果而非组件的根本原因——它天生就是可组合的。【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考