我如何调整沿一条边的点的长方体阴影？

Question

在材质设计中，阴影根据其高度智能地应用。我怎么才能模仿它呢？

示例:具有6px阴影的工具栏与具有4px阴影的卡片重叠。阴影应该只在卡的顶部是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);