如何在边缘的点处调整框阴影？

Question

在 Material Design 中，阴影会根据其高度智能应用。我该如何模仿？

示例：带有 6 像素阴影的工具栏与带有 4 像素阴影的卡片重叠。阴影在卡片顶部应该只有 2px，而其他地方应该是 6px。

JavaScript 解决方案很好。

Answer 1

首先，我想指出，在大多数情况下，阴影应该在卡片下方而不是顶部，这是为了给人一种高高在上的感觉。

材料设计中与阴影相关的指南可以在HERE找到。

要创建“不平衡”阴影，您可以这样做：

box-shadow: H V B S C;

其中H：水平偏移，V：垂直偏移，B：模糊，S：展开，C：颜色

例如：

div {
box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.35);
width: 100px;
height: 100px;
padding: 20px;
}

<div class="div"></div>

可以在w3schools's website 中找到更“现实”和更高级的示例。它同时使用多个阴影：box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);