css - 向现有阴影未知的元素添加额外的 box-shadow

Question

我假设这个问题的答案是不可能的，但我还是在问，希望有人知道一个聪明的解决方法。

假设我有以下类.left-inset，它在元素左侧添加一个 1px 白色框阴影以赋予它一些深度：

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

问题是，如果我添加这个类的元素已经定义了一个 box-shadow，这个 box-shadow 将覆盖现有的 box-shadow（或者这个阴影不会被应用，具体取决于级联）。我想找到一种方法来安全地添加这个类而不会发生冲突。

我希望将来有一些浏览器支持以下内容：

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

继承在这里不是正确的词，因为继承意味着来自父级的值，但你明白了。

这种方法虽然不是完全证明，但至少可以让我知道我不会与现有的 box-shadow 冲突，除非它们定义了三个以上。在大多数情况下，这已经足够了。

有谁知道这样的事情是否可行，或者是否有建议的语法来为已经定义的阴影添加额外的阴影？

score 7 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

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 编写的类中叠加样式需要更多的工作。

score -2 · Accepted Answer

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

向下滚动以查找多个阴影。

css - 向现有阴影未知的元素添加额外的 box-shadow

4 回答 4

Related

Reference