css - 理解css继承currentColor

Question

我很好奇 currentColor 以及当它被继承 和/或用于其他属性时它的行为方式。另一个方面是在 border-property 中省略颜色值，例如默认为文本颜色。

.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 和 Chrome 43 中，只有 Text-Color 是石灰色。
另一方面，在 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 时 Firefox 中的边框会有所不同
• 为什么inherit 不在同一元素上使用颜色值？
• 有没有办法使用相同的属性并切换颜色？ (对于边框颜色，您可以通过重置它在示例中看到)

如果您想尝试一下，这里还有一个 dabblet 链接:
http://dabblet.com/gist/587ea745c7cda7a906ee

Answer 1

所以，这里有几件事:

1. CSS 工作组同意在 CSS 颜色级别 3 和 CSS 颜色级别 4 之间更改 currentColor 的含义。在 level 3 ，它在计算值时被解析并且计算值被继承；在 level 4 ，关键字 currentColor 作为计算值继承，并在使用值时解析。

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

   我认为大多数实现还没有机会更新到第 4 级的新规则。Gecko 当然没有，尽管它在我要做的事情列表中(但不在顶部)。

2. Firefox 长期以来(早在 currentColor 存在之前)就实现了一个特殊的内部值作为 border-*-color 和 outline-color 的初始值。 (我们也对 text-decoration-color 做同样的事情，但自 1998/1999 以来就没有这样做过。)这就像 4 级 currentColor 一样工作，所以一旦我们切换我们的实现，我们就可以统一这两个东西，但我们不能' 用 3 级 currentColor 切换我们的实现，因为如果它是属性的初始值，这将是一个显着的性能和内存命中。 (实际上，统一我们的实现意味着对所有其他采用颜色值的属性执行与我们为这些属性所做的相同的工作。)

3. text-shadow 和 box-shadow，当颜色被省略时，已经明确指定当颜色被省略时的行为等同于级别 4 定义 currentColor 的方式，甚至在 currentColor 以这种方式工作之前:见box-shadow的定义| (text-shadow的定义就是指向box-shadow)。