如何调整边缘局部box-shadow？如何模拟Material Design智能层级阴影？

其实很简单，利用box-shadow支持多组阴影的特性，就能给元素的不同边缘设置差异化的阴影效果。每组阴影用逗号分隔，通过调整水平（x轴）和垂直（y轴）的偏移量，就能控制阴影出现在哪条边上，同时还能单独设置模糊半径、扩散半径和颜色。

举个实际的例子，比如给元素的四个边设置不同样式的阴影：

.multi-edge-shadow {
  box-shadow:
    /* 顶部阴影：y轴负偏移，阴影向上 */
    0 -4px 6px rgba(0, 0, 0, 0.15),
    /* 右侧阴影：x轴正偏移，阴影向右 */
    4px 0 6px rgba(0, 0, 0, 0.1),
    /* 底部阴影：y轴正偏移，阴影向下 */
    0 6px 10px rgba(0, 0, 0, 0.2),
    /* 左侧阴影：x轴负偏移，阴影向左 */
    -4px 0 6px rgba(0, 0, 0, 0.1);
}

如果只想给某几条边加阴影，直接去掉不需要的组就行。比如只给底部和右侧加阴影：

.bottom-right-shadow {
  box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.2);
}

Material Design的阴影逻辑是：元素的层级（elevation）越高，阴影越厚重；当高层级元素覆盖在低层级元素上时，被覆盖区域的低层级阴影会被抵消，只显示两者层级差对应的阴影——就像你说的，工具栏（6px阴影）盖住卡片（4px阴影）时，卡片顶部重叠区域的阴影应该是2px。

下面给你一个JavaScript实现的方案，核心思路是检测元素重叠区域，动态添加覆盖层来修改阴影：

第一步：基础HTML和CSS #

<div class="toolbar">工具栏</div>
<div class="card">卡片内容</div>

/* 工具栏：层级6对应的阴影 */
.toolbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #ffffff;
  box-shadow: 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.2);
}

/* 卡片：层级4对应的阴影 */
.card {
  margin: 80px auto 0;
  width: 85%;
  height: 220px;
  background: #ffffff;
  box-shadow: 0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.2);
  position: relative;
}

/* 用于覆盖并替换阴影的层 */
.shadow-override {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff; /* 用背景色盖住原卡片的顶部阴影 */
  box-shadow: 0 2px 3px rgba(0,0,0,0.08); /* 层级差6-4=2对应的阴影 */
}

第二步：JavaScript逻辑 #

function updateOverlapShadow() {
  const toolbar = document.querySelector('.toolbar');
  const card = document.querySelector('.card');
  
  if (!toolbar || !card) return;

  // 获取元素的位置信息
  const toolbarRect = toolbar.getBoundingClientRect();
  const cardRect = card.getBoundingClientRect();

  // 计算顶部重叠的高度：工具栏底部到卡片顶部的距离（如果重叠则为正数）
  const overlapHeight = Math.max(0, toolbarRect.bottom - cardRect.top);

  // 获取或创建阴影覆盖层
  let shadowOverride = card.querySelector('.shadow-override');
  if (!shadowOverride) {
    shadowOverride = document.createElement('div');
    shadowOverride.classList.add('shadow-override');
  }

  if (overlapHeight > 0) {
    // 有重叠时，设置覆盖层高度为重叠区域高度，添加到卡片上
    shadowOverride.style.height = `${overlapHeight}px`;
    card.appendChild(shadowOverride);
  } else {
    // 无重叠时移除覆盖层
    shadowOverride.remove();
  }
}

// 页面加载时初始化
updateOverlapShadow();

// 监听滚动和窗口大小变化，实时更新
window.addEventListener('scroll', updateOverlapShadow);
window.addEventListener('resize', updateOverlapShadow);

优化说明 #

如果你想更贴合Material Design的官方阴影规范，可以把不同层级对应的阴影样式存成一个对象，动态计算层级差对应的阴影：

// Material Design 官方elevation对应的阴影
const elevationShadows = {
  1: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
  2: '0 2px 2px rgba(0,0,0,0.14), 0 3px 1px rgba(0,0,0,0.12), 0 1px 5px rgba(0,0,0,0.2)',
  4: '0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.2)',
  6: '0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.2)'
};

// 在updateOverlapShadow函数里替换阴影样式
const toolbarElevation = 6;
const cardElevation = 4;
const diffElevation = toolbarElevation - cardElevation;
shadowOverride.style.boxShadow = elevationShadows[diffElevation] || '';

这样就能精准匹配Material Design的阴影效果啦。

内容的提问来源于stack exchange，提问作者Derek Kaplan