Question

我的样式表中有一个box-shadow属性应用于.foo：

.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

使用内嵌样式，新规则将覆盖旧规则。我只想用CSS做这件事的唯一方法是使用绝对定位的pseudo element，尽管这也取决于你的.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 */
}

jsFiddle demo

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);

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

2 个答案: