向现有阴影未知的元素添加其他框阴影

Question

我假设这个问题的答案是,这是不可能的,但无论如何我希望有人知道一个聪明的解决方法.

假设我有以下类.left-inset在元素的左侧添加1px白框阴影以给它一些深度:

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

问题是,如果我添加此类的元素已经定义了一个box-shadow,则此box-shadow将覆盖现有的一个(或者根据级联不会应用此阴影).我想找到一种方法来安全地添加这个类而不会发生冲突.

我希望将来有一些浏览器支持如下所示:

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

继承在这里不是正确的词,因为继承意味着来自父级的值,但是你得到了这个想法.

这种方法虽然不是完全证明的,但至少可以让我知道我不会与现有的盒子阴影冲突,除非他们定义超过三个.在大多数情况下,这将足够好.

有没有人知道这样的事情是否可行,或者是否有一个建议的语法来为已定义的阴影添加额外的阴影？

Answer 1

绝对定位的伪元素（原始容器设置了位置）似乎是唯一的解决方案：

见小提琴。（为了视觉，我做了不同的尺寸/颜色）。

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