在Material Design中，阴影会根据其高度智能地应用。我怎么能效仿呢？
示例：具有6px阴影的工具栏与具有4px阴影的卡重叠。影子应该只在卡顶部2px，但在其他地方只有6px。
JavaScript解决方案很好。
答案 0 :(得分：0)
首先，我想指出，在大多数情况下，阴影应位于卡片下方但不在顶部，这是为了给人一种提升感。
可以找到与材料设计中的阴影相关的指南HERE。
创造一个不平衡的＆＃34;影子，你可以这样做：
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>
更多＆＃34;现实＆＃34;可以在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);