如何制作多个投影效果？（针对IT技术问题）

Question

我想为div的背景图像制作两个具有阴影效果的阴影。

这种方法行不通：

-webkit-filter:drop-shadow(3px 3px 5px #000000, 2px 2px 2px #ffcc00);
filter:drop-shadow(3px 3px 5px #000000, 2px 2px 2px #ffcc00);

- VeloFX

Answer 1

filter属性可以接受多个过滤器，因此您可以重复使用drop-shadow：

filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);

.gray {
  -webkit-filter: drop-shadow(3px 3px 5px #000000);
  filter: drop-shadow(3px 3px 5px #000000);
}
.yellow {
  -webkit-filter: drop-shadow(2px 2px 2px #ffcc00);
  filter: drop-shadow(2px 2px 2px #ffcc00);
}
.gray-yellow {
  -webkit-filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);
  filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);
}

<span class="gray">Hello world</span>
+ <span class="yellow">Hello world</span>
= <span class="gray-yellow">Hello world</span>

- Oriol

---

必须非常微妙，因为在Chrome中它什么也没做。 - Paulie_D

-webkit-filter - Abhitalks

@Paulie_D Chrome需要供应商前缀。我已经在代码片段中包含了它。 - Oriol

但是你必须将第一个阴影和第二个阴影交换位置，因为较小的阴影必须放在第一位！ - VeloFX

请注意，第二个阴影被施加在第一个阴影上，就像你在这个例子中看到的一样：https://codepen.io/yukulele/pen/MrNJja - Yukulélé

Answer 2

在它们之间用空格分隔每个过滤器：

filter: drop-shadow(0px 0px 8px #7f6400 ) drop-shadow(0px 0px 8px #7f6400 )

- Tobassum Munir