理解 css 继承的 currentColor

Question

我很好奇 currentColor 以及它在 inherited and/or 用于其他属性时的表现。另一个方面是省略边框中的颜色值 - 例如，属性应默认为文本颜色。

.outer {
 color: #f90;
 border: 5px solid;
 box-shadow: 0 0 15px;
 text-shadow: 2px 2px 3px;
}

<div class="outer">
 Outer Div
</div>

上面的代码段没有什么特别之处。
阴影和边框与文本颜色相同。

现在让我们继承颜色：

.outer {
    color: #f90;
    border: 5px solid;
    box-shadow: 0 0 15px;
    text-shadow: 2px 2px 3px;
}

 
 .inner {
     color: lime;
     display: inline-block;
     border: inherit;
     box-shadow: inherit;     
 }

<div class="outer">
 Outer Div
 <div class="inner">
  Inner Div no CurrentColor
 </div>
</div>

结果：

在 IE11 和 Chrome43 中，只有文本颜色是石灰色。
另一方面，在 Firefox 38 中，阴影也是绿色的。 (注意不是边框)

当主动将所有内容设置为 currentColor 时，浏览器会显示相同的结果，即仅显示青绿色文本，其他所有内容均显示橙色。（正如您在底部的最后一个片段中看到的那样）

/**
 * playing with currentColor
 */
body {background: darkgray;} /* friendly wink */ 
.outer {
 width: 85%;
 color: #f90;
 border: 5px solid;
 box-shadow: 0 0 15px;
 text-shadow: 2px 2px 3px;
 padding: 15px; margin: 15px;
}
.outer.currentColor {
 border: 5px solid;
 box-shadow: 0 0 15px currentColor;
 text-shadow: 2px 2px 3px currentColor;
}
 
 .inner {
     color: lime;
     display: inline-block;
     border: inherit;
     box-shadow: inherit;     
 }
 .inner.resetting {
  border-color: currentColor;
  /* text-shadow-color: currentColor; /* does not exist */
  /* box-shadow-color: currentColor; /* does not exist */
 }

<div class="outer">
 Outer Div
 <div class="inner">
  Inner Div no CurrentColor
 </div>
</div>

<div class="outer currentColor">
 Outer Div 
 <div class="inner">
  Inner Div with CurrentColor 
 </div>
 <div class="inner resetting">
  Inner Div with CurrentColor
 </div>
</div>

问题：

为什么在省略 currentColor
为什么继承不在同一元素上使用颜色值？
有没有办法使用相同的属性并切换颜色？ （对于边框颜色，您可以通过重置它在示例中看到）

这里还有一个 dabblet link 如果你想玩一下：
http://dabblet.com/gist/587ea745c7cda7a906ee

Answer 1

Why is there a difference with the border in Firefox when omitting currentColor

CSS's specifications 用于继承 text-shadow 说它应该继承 .inner currentColor 如果它本身设置为 inherit，但 box-shadow 未指定并且看起来浏览器在实现上不一致。可能的错误。

Why does inherit not use the color value on the same element?

它似乎继承了计算的值，而不是输入的值。示例：

.outer {
    color:red;
    box-shadow: 2px 2px 2px; /* color omitted */
}
.inner {
    box-shadow: inherit;
 /* translates to:
    box-shadow: 2px 2px 2px red; */
}

正如我所说，这是错误的实现。

Is there a way to use the same properties and switching the color? (for border-color there is as you can see in the example by resetting it)

显式复制而不是继承怎么样？这会给你最好的结果，而不会导致 SASS/LESS，imo。

.outer {
    color: #f90;
}

.outer, .inner {
    border: 5px solid;
    box-shadow: 0 0 15px;
    text-shadow: 2px 2px 3px;
}
 
.inner {
    color: lime;    
    display: inline-block;
}

<div class="outer">
 Outer Div
 <div class="inner">
  Inner Div no CurrentColor
 </div>
</div>

Answer 2

所以，这里有几件事：

CSS 工作组同意在 CSS 颜色级别 3 和 CSS 颜色级别 4 之间更改 currentColor 的含义。在 level 3, it is resolved at computed value time and the computed value is inherited; in level 4 ，关键字 currentColor 作为计算值继承，并在使用值时解析。

进行此更改的原因有很多，但我找不到会议记录，而且我忘记了所有细节。（我可以在 https://lists.w3.org/Archives/Public/www-style/2014Feb/0052.html 找到几分钟来讨论事后的变化。）它使 transitions/animations 的情况变得更糟，但在许多其他情况下却更好。它稍微增加了实现的复杂性，但提高了性能（至少在 Gecko 中）。

我认为大多数实施还没有机会更新到级别 4 中的新规则。Gecko 当然没有，尽管它在我要做的事情列表中（但不在顶部）。
Firefox 长期以来（早在 currentColor 存在之前）就实现了一个特殊的内部值作为 border-*-color 和 outline-color 的初始值。（我们也为 text-decoration-color 做同样的事情，但自 1998/1999 以来就没有这样做过。）这就像 4 级 currentColor 一样工作，所以一旦我们切换我们的实现，我们就可以统一这两个东西，但我们不能' 用 3 级 currentColor 切换我们的实现，因为它是属性的初始值，这将是一个显着的性能和内存命中。（实际上，统一我们的实现意味着对所有其他属性具有颜色值的属性执行相同的工作。）
text-shadow 和 box-shadow，当省略颜色时，已明确指定省略颜色时的行为等同于级别 4 定义 currentColor 的方式，甚至在 currentColor 以这种方式工作之前：请参阅 box-shadow (the definition of text-shadow 的定义只是指向 box-shadow).

理解 css 继承的 currentColor

understanding css inherited currentColor

css

inheritance

现在让我们继承颜色：

结果：

问题：