html - 有什么方法可以在不传递颜色的情况下更改框阴影？

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 不能像 border 那样被分解成多个部分。但是您可以使用的一个技巧是 box-shadow 从元素的颜色属性继承它的颜色。

<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/