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

Question

css3多个阴影可能从不同的CSS规则/类累积起来吗？

即

.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

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

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

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

Answer 2

这样写：

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

Answer 3

不是正好有一个更好的方法来做到这一点以外做一个单独的类像.doubleShadow或再写风格.blackShadow .limeShadow。

您可以使用LESS并制作一个混音然后您就可以实现了。如果您正在寻找不同的解决方案，这将是更好的选择。

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