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.