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

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

See the fiddle. （我为视觉做了不同的尺寸/颜色）。

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

Answer 2

一种解决方案可能是使用伪元素：

.left-inset::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;

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

它有点hacky，但只要该元素尚未定义:: after伪元素，它应该可以工作。

Answer 3

我认为这就是你想要的http://www.css3.info/preview/box-shadow/

滚动以下找到多个阴影。

Answer 4

一种方法是确定当前的盒子阴影，将所需的部分叠加到它上面并将其应用回来（不确定它是否值得麻烦但是......）。

window.getComputedStyle(element).boxShadow

将为您提供一个格式为：

的字符串

<color> <left> <top> <softness> <spread> - 例如：rgb(102, 102, 102) 5px 5px 5px 0px

在变量中包含上述字符串后：

使用空格字符对其进行拆分 - s = s.split(' ');
采取最后四部分
根据数组
使用空格加入数组 - s = s.join(' ');
将其应用回元素 - elem.style.boxShadow = s;

注意：这适用于ff和chrome（因为返回的字符串格式相同）。但我认为实际尝试生产版本实在太过分了。此外，从你在CSS中编写的类中添加样式还需要做更多的工作。

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

4 个答案: