阴影是 Material Design 中重要的一部分，和纸质材料一样，让元素看上去有层次感和体积感。这篇文章将介绍 Material Design 中如何使用阴影来增强用户界面的可视化效果。
阴影的类型
Material Design 中定义了两种阴影类型： umbra 和 penumbra。其中 umbra 是更深的阴影，通常表示物体的底部或后面；而 penumbra 是较浅的阴影，表示物体与其周围的空间的界限。
下图是 Material Design 中阴影类型的示意图：
在实际使用中，阴影常常同时包括 umbra 和 penumbra，以增强其立体感和层次感。
如何使用阴影
在 Material Design 中，阴影是通过在元素下面添加一个 box-shadow 来实现的。下面我们来看一个例子：
<div class="card">
<div class="card-content">
<h2>这是一个卡片标题</h2>
<p>这是一个卡片内容</p>
</div>
</div>在上面的 HTML 代码中，我们定义了一个卡片。现在我们需要为这个卡片添加阴影效果。可以通过以下 CSS 代码来实现：
.card {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.2);
}在上面的代码中，box-shadow 属性包括两个参数： umbra 和 penumbra。第一个参数是 (0, 2px, 4px, rgba(0, 0, 0, 0.2))，表示 umbra，也就是阴影的深层部分。这个参数的前两个值分别表示阴影的水平和垂直偏移量，第三个值表示阴影的模糊半径，最后一个值是阴影的颜色和透明度。第二个参数是 (0, 4px, 8px, rgba(0, 0, 0, 0.2))，表示 penumbra，也就是阴影的浅层部分。这个参数的值和第一个参数类似，只是阴影的偏移量和模糊半径更大一些。
属性值解释
下面是 box-shadow 属性的各个参数值的具体解释：
- 水平偏移量：阴影相对于元素的水平偏移量。可以是正值也可以是负值。如果为正值，阴影会在元素的右侧；如果为负值，阴影会在元素的左侧。
- 垂直偏移量：阴影相对于元素的垂直偏移量。可以是正值也可以是负值。如果为正值，阴影会在元素的下方；如果为负值，阴影会在元素的上方。
- 模糊半径：阴影的模糊半径。如果这个值为 0，阴影将是锐利的；如果这个值越大，阴影就越模糊，越接近物体的模糊边缘。
- 阴影颜色和透明度：阴影的颜色和透明度。可以是常规颜色值或 rgba 值。透明度值为 0 时，阴影是透明的。
结论
在 Material Design 中，阴影是一种有效的增强元素立体感和层次感的方式。使用 box-shadow 属性来添加阴影是非常方便的。我们刚才的这个卡片例子就是很好的示范。当然，使用阴影时需要注意阴影的类型和大小，以达到最佳效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673293cf0bc820c5823dd7df