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 following class .left-inset that adds a 1px white box-shadow to the left of an element to give it some depth:

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

The problem is that if the element I add this class to already has a box-shadow defined, this box-shadow will override that existing one (or this shadow won't be applied depending on the cascade). I want to find a way to safely add this class without conflicts.

I'm hoping there is some future browser support for something like the following:

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

Inherit isn't the right word here, because inherit implies the value from the parent, but you get the idea.

This method, while not full-proof, would at least allow me to know that I'm not conflicting with existing box-shadows unless they define more than three. In most cases, this will be good enough.

Does anyone know whether anything like this is possible, or whether there is a proposed syntax for adding additional shadows to already defined ones?

Answer 1

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);
}