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