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

【问题标题】：css3 multiple shadows from different rulescss3 来自不同规则的多个阴影
【发布时间】：2023-03-31 03:03:01
【问题描述】：

是否可以从不同的 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>

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

谢谢。

【问题讨论】：

【解决方案1】：

这样写：

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

【讨论】：

【解决方案2】：

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

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

不管怎样，我对你在问题中给出的内容做了一个fiddle。

【讨论】：

【解决方案3】：

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

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

之所以选择此选项，是因为它将阴影类的定义分开，并且仍然允许我同时显示两个阴影。

【讨论】：