有没有办法在不传递颜色的情况下改变盒子阴影？

Question

这是我的问题。我有 2 个 css 类，我的元素可以有

.classA{box-shadow:inset -2px 0px 0px 0px rgba(63,191,31,1);}
.classB{box-shadow:inset -2px 0px 0px 0px rgba(204,29,29,1);}

我希望使用第三类来更改插图但不更改颜色

.classC{box-shadow:inset -10px 0px 0px 0px;}

这可行（阴影在这里），但颜色变成黑色。我想保留原来的颜色。

如何仅使用 CSS更改阴影属性而不丢失颜色？

Answer 1

Box-shadow 不能像边框那样被分解成多个部分。但是您可以使用的一个技巧是 box-shadow 从元素的 color 属性继承其颜色。

<div class="box">
</div>

<div class="shadow box">
</div>

.box{
  box-shadow: 0 0 10px;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #fff;
}

.box.shadow{
  color: rgba(255,0,0,.3);
}

http://jsfiddle.net/82z8r73o/