4

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

IE

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

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

谢谢。

4

3 回答 3

2

像这样写:

.blackShadow.limeShadow {box-shadow: 0 0 10px 5px black, 40px -30px lime}
于 2012-06-20T12:52:43.277 回答
0

除了创建一个单独的类.doubleShadow或为.blackShadow .limeShadow.

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

不管怎样,我对你在问题中给出的内容做了一个小技巧。

于 2012-06-20T15:07:27.017 回答
0

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

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

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

于 2012-07-16T14:01:34.013 回答