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

这样写：

.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>

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

Answer 4

现在在 CSS3 中有一种方法可以做到这一点，即使用 CSS 自定义属性和 var() 函数 (https://caniuse.com/css-variables)。自 2017 年起可在大多数设备上使用：

:root{
    --limeShadow: 40px -30px lime;
    --blackShadow: 0 0 10px 5px black;
    --blackAndLime: var(--limeShadow), var(--blackShadow);
}
.blackShadow{
    box-shadow: var(--blackShadow);
}
.limeShadow{
    box-shadow: var(--limeShadow);
}
.blackShadow.limeShadow{
   box-shadow: var(--blackAndLime);
}