Add additional box-shadow to an element where existing shadow is unknown

Question

I\'m assuming the answer to this question is that it\'s impossible, but I\'m asking anyway in the hopes that someone knows of a clever workaround.

Let\'s say I have the

Answer 1

One way would be to determine the current box-shadow, superimpose the required parts to it and apply it back (not sure if it'll be worth the trouble but..).

window.getComputedStyle(element).boxShadow

will give you a string formatted like:

<color> <left> <top> <softness> <spread> - for example: rgb(102, 102, 102) 5px 5px 5px 0px

Once you have the above string in a variable:

1. split it using space character - s = s.split(' ');
2. take the last four parts
3. replace or keep individual values as required in the array
4. join the array using space - s = s.join(' ');
5. apply it back to the element - elem.style.boxShadow = s;

NOTE: This works in ff and chrome (since the returned string format is the same). But i think this is too much of an overkill to actually try in a production version. Moreover, it'll take even more work to superimpose styles from a class you've written in your css.

Answer 2

One solution might be to use a pseudo-element:

.left-inset::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;

    box-shadow: 1px 0 0 rgba(255,255,255,.25);
}

It's a little bit hacky, but as long as the element hasn't defined the ::after pseudo-element already, it should work.

Answer 3

I think this is what you want http://www.css3.info/preview/box-shadow/

SCROLL BELOW TO FIND MULTIPLE SHADOWS.

Answer 4

An absolutely positioned pseudo-element (with the original container having position set) seems like the only solution:

See the fiddle. (I did different size/color for visual).

.test:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow:3px 3px rgba(275,0,0,.25);
}