更新时间:2023-12-01 11:14:28
绝对定位的伪元素(原始容器已设置位置)看起来像是唯一的解决方案:
.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);
}