如何制作多个DROP-shadow？

Question

我想为div backgroundimage制作带阴影的两个阴影。 这不会起作用：

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

Answer 1

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

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;