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?