添加内联框阴影选项，但不覆盖现有属性

Question

我在样式表中为.foo添加了一个box-shadow属性:

.foo {
  box-shadow: 0 0 10px 0 #000000 inset, 0 0 2px 0 #3C3C3C inset;
}

现在我想添加另一个选项到几个div内联不同的动态生成的值，而不覆盖现有的box-shadow属性:

<div class="foo" style="box-shadow: 0 -5px 0 0 red inset">
</div>
<div class="foo" style="box-shadow: 0 -5px 0 0 blue inset">
</div>
<div class="foo" style="box-shadow: 0 -5px 0 0 green inset">
</div>

第一个div的结果应该是这样的:

box-shadow: 0 -5px 0 0 red inset, 
  0 0 10px 0 #000000 inset, 
  0 0 2px 0 #3C3C3C inset

我怎么能这么做?非常感谢。

Answer 1

使用inline样式，新规则将简单地覆盖旧规则。我能想到的唯一方法是使用一个绝对定位的伪元素，尽管这也依赖于你的.foo相对定位。

CSS

.foo:after {
    position: absolute;
    content: '';
    top: 0; right: 0; bottom: 0; left: 0;
    box-shadow: 0 0 10px 0 #000000 inset, 0 0 2px 0 #3C3C3C inset
}
.foo {
    position:relative;
    width:100px; /* added for demo */
    height:100px; /* added for demo */
}

<<p> jsFiddle演示/strong>

Answer 2

在jQuery中应该这样做:

var currentBoxShadow = $('.foo').css("box-shadow");
$('.foo').css("box-shadow", "0 -5px 0 0 #FFF, " + currentBoxShadow);
currentBoxShadow = $('.bar').css("box-shadow");
$('.bar').css("box-shadow", "0 -5px 0 0 #FFF, " + currentBoxShadow);

如果您希望它们都是同一个类，那么第n个子选择器可以提供帮助:

var currentBoxShadow = $('.foo:nth-child(2)').css("box-shadow");
$('.foo:nth-child(2)').css("box-shadow", "0 -5px 0 0 #F00, " + currentBoxShadow);