如何用box-shadow实现无重叠阴影的双聚光灯效果？

问题根源是两个聚光灯的全屏半透明阴影叠加后，重叠区域透明度倍增，导致视觉上偏暗。以下是两种解决方案，优先推荐保留box-shadow的实现方式：

方案一：单阴影层+透明遮罩实现双聚光灯 #

只保留第一个聚光灯的box-shadow作为全局覆盖层，第二个聚光灯通过高层级透明圆形遮挡阴影，露出下方内容：

修改CSS代码：

.spotlight-active .spotlight.desktop {
  position: fixed;
  top: 20px;
  left: 35px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  z-index: 51;
  box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.7);
  display: block;
  background: transparent; /* 确保元素透明，不遮挡下方内容 */
}

.spotlight-active .spotlight-2.desktop {
  position: fixed;
  top: 20px;
  left: 350px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  z-index: 52; /* 层级高于第一个聚光灯，挡住其阴影 */
  display: block;
  background: transparent; /* 去掉box-shadow，仅作为透明遮罩 */
}

原理：第一个聚光灯的阴影覆盖全屏，第二个聚光灯因层级更高且透明，会在阴影层上“挖”出第二个高亮区域，避免了阴影叠加问题。

方案二：clip-path创建多镂空覆盖层（更简洁，替代box-shadow） #

如果可以接受替换box-shadow实现方式，直接给overlay设置clip-path，一次性创建两个镂空区域：

修改CSS代码：

.spotlight-active .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 50;
  display: block;
  /* 挖两个圆形区域：circle(半径 at 中心x坐标 中心y坐标) */
  clip-path: circle(65px at 100px 85px), circle(65px at 415px 85px);
}

/* 可隐藏原聚光灯元素 */
.spotlight-active .spotlight.desktop,
.spotlight-active .spotlight-2.desktop {
  display: none;
}

原理：通过clip-path直接在覆盖层上裁剪出两个圆形高亮区，无需多个阴影层，彻底避免叠加问题。

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