在 Material Design 中，Shadow 是一个重要的视觉效果。通过在 UI 元素周围添加阴影，可以增加层次感和深度感，使 UI 更加立体和自然。
Shadow 技术简介
Shadow 技术是通过在 UI 元素周围添加阴影来实现的。在 Material Design 中，阴影分为两种类型：elevation 和 ambient。elevation 阴影是基于 UI 元素的高度而产生的阴影，而 ambient 阴影是基于 UI 元素的形状而产生的阴影。
elevation 阴影可以通过设置 z-index 或 box-shadow 属性来实现。z-index 是 CSS 属性，表示元素在堆叠顺序中的位置，数值越大表示越靠近顶部。box-shadow 属性是 CSS 属性，用于添加元素周围的阴影效果。
ambient 阴影可以通过设置 outline 属性来实现。outline 是 CSS 属性，用于添加元素周围的轮廓线。通过设置轮廓线的模糊度和颜色，可以实现 ambient 阴影的效果。
Shadow 的使用方法
在 Material Design 中，Shadow 的使用方法有以下几个步骤：
- 确定 UI 元素的类型和高度，选择合适的 elevation 阴影级别。
- 根据 UI 元素的形状，选择合适的 ambient 阴影模式。
- 根据选定的 elevation 和 ambient 阴影，设置阴影效果的具体参数，如 z-index、box-shadow、outline 等。
下面是一个例子，展示如何使用 Shadow 技术实现一个 Material Design 风格的按钮：
<button class="md-button">Click Me</button>
// javascriptcn.com 代码示例
.md-button {
display: inline-block;
padding: 12px 24px;
font-size: 16px;
font-weight: 500;
color: #fff;
background-color: #2196f3;
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
outline: none;
}
.md-button:hover {
background-color: #1976d2;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14),
0 1px 7px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -3px rgba(0, 0, 0, 0.4);
}在上面的例子中，我们使用了 box-shadow 属性来实现 elevation 阴影，并使用 outline 属性来实现 ambient 阴影。box-shadow 属性的值是一个由多个参数组成的列表，每个参数表示一个阴影层。outline 属性的值是一个颜色值和一个长度值，分别表示轮廓线的颜色和宽度。
总结
Shadow 技术是 Material Design 中的一个重要的视觉效果，通过在 UI 元素周围添加阴影，可以增加层次感和深度感，使 UI 更加立体和自然。在使用 Shadow 技术时，需要根据 UI 元素的类型和形状，选择合适的 elevation 和 ambient 阴影，并设置阴影效果的具体参数。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657a6de8d2f5e1655d4c321d