`drop-shadow` 的阴影只能投射到特定元素上吗？答案

【问题标题】：Can the shadow from `drop-shadow` only be cast onto specific elements?`drop-shadow` 的阴影只能投射到特定元素上吗？
【发布时间】：2021-10-11 17:27:58
【问题描述】：

下面的顶部图像指示如果将drop-shadow 应用于顶部元素，将如何绘制。我正在尝试确定是否可以仅在某些对象上投射阴影（如下图所示）。

我对这方面的非标准解决方案持开放态度，但如果可能的话，我更愿意使用drop-shadow 过滤器，因为我也想将它用于非矩形形状。

编辑：按要求提供小提琴。 https://jsfiddle.net/fhrktawm/

编辑 2：添加一个更复杂的示例来说明我的用例。我的目的是通过改变阴影的长度来指示额外的深度。

【问题讨论】：

提供到目前为止您尝试过的代码
除了简单地将filter: drop-shadow(-10px 15px 0 rgba(0, 0, 0, 0.25)) 应用于元素之外，我没有尝试任何其他方法。我想不出一种从概念上做到这一点的方法，所以我的问题是寻找可以尝试的东西。
是的，提供html 和css 使用filter: drop-shadow(-10px 15px 0 rgba(0, 0, 0, 0.25)) 创建这些框
@Rana 这些盒子是在 illustrator 中绘制的。我可以编写代码来绘制顶级版本。
基本没有。这不是阴影在 CSS 或现实世界中的工作方式。

标签： css dropshadow css-filters

【解决方案1】：

您可以通过使用box-shadow 或drop-shadow 的第四个值来实现。
并在提供的屏幕截图中放置阴影

由于正方形的阴影始终是正方形，因此只有相交部分也是正方形时才能在准确的位置

.box {
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

.box-1 {
  z-index: 10;
  box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
  transform: translate3d(60px, 42px, 0);
}

<div class="box box-1"></div>
<div class="box"></div>

更新

您可以使用::after 属性来实现这样的第二个效果

.box {
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  transform-style: preserve-3d;
}

.box-1 {
  box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
  transform: translate3d(60px, 42px, 100px);
    z-index: 100;
}

.box-1::after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  box-shadow: -15px 15px 0 rgba(0, 0, 0, 0.1);
  z-index: -100;
  transform: translateZ(-100px)
}

<div class="box box-1"></div>
<div class="box"></div>

但是你可以看到另一个盒子在上面（因为transform-style: preserve-3d;）因为不能得到盒子下面的盒子阴影。尝试了不同的方法。

所以不同的方法是通过使用另一个元素的 box-shadow 来完成的

.box {
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

.box-1 {
  z-index: 10;
  box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
  transform: translate3d(60px, 42px, 0);
}

.box-2::after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  box-shadow: 45px -45px 0 5px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

<div class="box box-1"></div>
<div class="box box-2"></div>

最后可以像这样实现所需的输出：

.boxContainer {
  border: 1px solid black;
  width: 160px;
  padding: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

.box-1 {
  z-index: 10;
  box-shadow: -36px 36px 0 -25px rgba(0, 0, 0, 0.25);
  transform: translate3d(60px, 42px, 0);
}

.box-2 {
  box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.25);
}

.box-2::after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  box-shadow: 45px -45px 0 6px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

<div class="boxContainer">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</div>

【讨论】：

这很聪明。非常感谢你的努力。不幸的是，这不是我所追求的。我将在我的主帖中添加另一张图片，以进一步解释我想要实现的目标。
相交部分应该是方形的，这样才能在准确的位置应用阴影。知道从特定角度看正方形可以有矩形阴影。 但有时现实世界的现象并不总是适用于虚拟世界的现象。
但正如@DavidLink 所说，相交部分应该是 square 。如果你能有这么多的变化而不是可以尝试进一步的解决方案。与上述解决方案一样，几乎是错误的
是的，一旦发布者更新了他们的问题，很遗憾您的答案无效。但是，我支持您，因为您提供的内容肯定是对最初发布的问题的有效答案。
是的，这就是为什么我在answer 和comments 中也添加了一个注释以使用 square 交叉点。感谢您的支持

【解决方案2】：

我正在尝试确定是否可以仅将阴影投射到某些对象上

简而言之：不，这不可能使用box-shadow 或drop-shadow() 过滤器。

【讨论】：