Material Design 是 Google 在 2014 年推出的一种设计语言，旨在为移动应用程序和网站提供美观、现代化和一致的外观和感觉。其中一个重要的设计元素就是阴影，它可以让 UI 更加真实且明确，同时提供重要的可视层次和深度。
本文将介绍 Material Design 中的阴影实现方法，帮助你更好地了解和应用阴影效果。
阴影规范
Material Design 阴影有一个标准的阴影规则，具体如下：
- 阴影颜色为黑色，不透明度在 0%（没有阴影）和 100%（完全黑色）之间。
- 阴影大小由 dp 值表示，没有最大值。
- 阴影的位置也可以自由选择。
使用阴影时，应该遵循以下准则：
- 不要在每个元素上都添加阴影，这会使界面看起来混乱而不自然。只在元素之间或需要强调的元素上使用阴影。
- 在设计时要注意，不要把阴影添加在元素的下方或左边，这会使元素看起来和页面没有连接性。
阴影实现方法
用 CSS 实现 Material Design 阴影是非常容易的，只需要一个简单的 box-shadow 属性。以下是一个带阴影的按钮示例：
.button {
background-color: white;
color: black;
padding: 1rem;
border: none;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}上面的代码中，阴影的颜色是黑色，不透明度为透明的 20%（即 0.2），大小为 2dp，并且向下偏移了 2dp。
可以通过调整阴影的偏移量、大小、不透明度和颜色来创造出不同的效果。通常，更深的阴影需要更大的偏移量和更高的不透明度。
阴影实现示例
下面是一些常见元素的阴影实现示例。
卡片
卡片作为 Material Design 中最常见的元素之一，它的阴影也表达了一个很好的效果。示例代码如下：
.card {
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}悬浮按钮
在 Material Design 中，悬浮按钮是最主要的亮点之一。悬浮按钮的阴影较深，使得它看起来像是从其容器中跳出来的。同时，按钮上一般会附带一些简单的动画效果。
-- -------------------- ---- ------- ---- - ----------------- -------- ------ ------ -------------- ---- ----------- - --- ---- ------- -- -- ----- ----------- --------- ---- ------------ - ---------- - ---------- ----------- ----------- - --- ---- ------- -- -- ----- -
卡片头部
很多时候，在卡片的头部添加一个宽度较大的标题有助于提高卡片的可读性。为了创建这种效果，可以给卡片头部添加一个较深的阴影。
.card-header {
background-color: #007bff;
color: white;
padding: 1rem;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}总结
阴影是 Material Design 中一个非常重要的设计元素，它可以为页面添加深度和可视层次。在设计中，应该根据情况谨慎添加阴影，避免过度和混乱。
用 CSS 实现 Material Design 阴影是非常容易的，只需要一个简单的 box-shadow 属性。同时也可以通过修改阴影的不透明度、大小、偏移量和颜色来创造出不同的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6487fe6148841e9894681a70