css3来自不同规则的多个阴影

Question

是否可以从不同的css规则/类中累积css3多个阴影？

即

.multipleShadows {box-shadow: 0 0 10px 5px black, 40px -30px lime}

将为元素创建两个阴影，黑色和石灰。

但我希望有两个不同的类 - 一个用于blackShadow，一个用于limeShadow

.blackShadow {box-shadow: 0 0 10px 5px black}
.limeShadow {box-shadow: 40px -30px lime}

并且都应用于具有两个类的单个元素。

<div class="blackShadow limeShadow">my div</div>

可以这样做吗？ 是否有其他方法可以实现这一目标？

感谢。

Answer 1

像这样写：

.blackShadow.limeShadow {box-shadow: 0 0 10px 5px black, 40px -30px lime}

Answer 2

除了创建.doubleShadow之类的单独类或为.blackShadow .limeShadow编写另一种样式之外，没有比这更好的方法了。

您可以使用 LESS 并制作一个可以实现的mixin。如果您正在寻找不同的解决方案，那将是一个更好的选择。

无论如何，我提出了你在问题中给出的fiddle。

Answer 3

我最终在原始div中使用了一个额外的div，并将第二个阴影类应用于内部div。

<div class="blackShadow"><div class="limeShadow"> my div</div></div>

这是选择的，因为它保持阴影类的定义分开，并且仍然允许我同时显示两个阴影。