Agregar una sombra de cuadro adicional a un elemento donde la sombra existente es desconocida

Question

Supongo que la respuesta a esta pregunta es que es imposible, pero lo estoy preguntando de todos modos con la esperanza de que alguien sepa de una solución inteligente.

Digamos que tengo la siguiente clase .left-inset que añade un 1px caja-sombra blanca a la izquierda de un elemento para darle algo de profundidad:

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

El problema es que si el elemento añado esta clase si ya tiene una sombra de cuadro definida, esta sombra de caja anulará la existente (o esta sombra no se aplicará dependiendo de la cascada). Quiero encontrar una forma de agregar esta clase de forma segura y sin conflictos.

Estoy esperando que hay un futuro soporte de los navegadores para algo como lo siguiente:

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

Heredar no es la palabra correcta aquí, porque implica hereda el valor de los padres, pero se entiende la idea .

Este método, aunque no a prueba total, al menos me permitiría saber que no estoy en conflicto con las sombras de caja existentes a menos que definan más de tres. En la mayoría de los casos, esto será suficiente.

¿Alguien sabe si algo como esto es posible, o si hay una sintaxis propuesta para agregar sombras adicionales a las ya definidas?

Answer 1

Un pseudo-elemento con posición absoluta (con el recipiente que tiene conjunto posición original) parece ser la única solución:

See the fiddle. (hice diferente tamaño/color para visual).

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