css3 multiple shadows from different rules

Question

Is it possible for css3 multiple shadows to be accumilated from different css rules / classes ?

i.e.

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

will create two shadows for the element, black and lime.

but I want to have two different classes - one for blackShadow and one for limeShadow

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

and have both applied to a single element that has both classes.

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

Can this be done? Are there alternate ways that can achieve this goal?

Thanks.

Answer 1

I ended up using an extra div placed inside the original div and applied the second shadow class to the internal div.

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

This was chosen becuase it keeps the definitions of the shadow classes separate and still allows me to show both the shadows at the same time.

Answer 2

Write like this:

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

Answer 3

There isn't exactly a better method to do this other than make a separate class like .doubleShadow or to write another style for .blackShadow .limeShadow.

You can use LESS and make a mixin which you can then implement. That will be a better option if you are looking for a different solution.

Regardless of that I made a fiddle of what you have given in the question.