向现有阴影未知的元素添加额外的box-shadow [英] Add additional box-shadow to an element where existing shadow is unknown

问题描述

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

让我们说我有以下类 .left-inset 在元素的左侧添加一个1px白色框阴影，以给它一些深度：

  .left-inset {
 box-shadow：inset 1px 0 0 rgba（255,255,255，.25）;问题是，如果元素我添加这个类已经有一个盒子，你可以使用这个方法来创建一个对象。阴影定义，这个框阴影将覆盖现有的阴影（或这个阴影不会应用，这取决于级联）。 
 
 
 
我希望有一些未来的浏览器支持类似下面的东西：
  .left-inset {
 box-shadow：inherit，inherit，inherit，inset 1px 0 0 rgba（255,255,255，.25） 
} 
  
继承在这里不是正确的词，因为继承意味着
 
 
 
这种方法虽然不是完全证明，但至少可以让我知道我没有与现有的盒子阴影冲突除非他们定义三个以上。 
 
 
 
有没有人知道是否可以这样做，或者是否有一个建议的语法为已定义的阴影添加额外的阴影
解决方案
绝对定位的伪元素（原始容器已设置位置）看起来像是唯一的解决方案：
 
 
 
  查看小提琴  
  .test：before {
 content：''; 
 position：absolute; 
 top：0; 
右：0; 
 bottom：0; 
 left：0; 
 box-shadow：3px 3px rgba（275,0,0，.25）; 
} 
  
 
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?
解决方案
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);
}


                        
这篇关于向现有阴影未知的元素添加额外的box-shadow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！