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

【问题标题】：Is there any way to change box shadow without passing a color?有没有办法在不传递颜色的情况下改变盒子阴影？
【发布时间】：2018-04-13 01:25:29
【问题描述】：

这是我的问题。我有 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 ONLY 更改阴影属性？

【问题讨论】：

我认为 box-shadow 没有像 box-shadow-type 或 box-shadow-color 这样的子属性，因此您必须重新定义整个属性。
我将不得不同意@zgood。您不能针对（使用 CSS）box-shadow 的特定属性。你也许可以用 JS 做到这一点，但这会破坏你试图用第三类做的事情。
和上面的两个 cmets 一样，当您检查元素时，您无法展开 box-shadow 属性，这意味着您不能像其他属性（边框、字体、边距等）一样划分它
如果 box-shadow 也是文本颜色，那么你可以使用：currentcolor。 ...否则，这可能会在某天有用oocss.org/spec/css-variables.html。这时候预处理器做它

标签： html css

【解决方案1】：

Box-shadow 不能像边框那样分解成部分。但是你可以使用的一个技巧是 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/

【讨论】：