Question

我对 currentColor 以及继承和/或在其他属性中使用时的行为方式感到好奇。另一个方面是省略border-property中的颜色值，例如默认为text-color。

＆＃13;

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

＆＃13;

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

＆＃13;

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

现在让我们继承颜色：

＆＃13;

.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;	    
	}

＆＃13;

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

＆＃13;

Resutls：

在IE11＆amp; Chrome 43只有文字颜色是石灰另一方面，在Firefox 38中，阴影也是绿色。 （注意不是边框）

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

＆＃13;

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

＆＃13;

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

＆＃13;

问题：

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

如果你想玩它，这里也是一个dabblet链接：
http://dabblet.com/gist/587ea745c7cda7a906ee

Answer 1

所以，这里有一些事情：

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

有很多理由要做出这个改变，虽然我找不到会议记录，但我已经忘记了所有的细节。（我可以在https://lists.w3.org/Archives/Public/www-style/2014Feb/0052.html找到分钟讨论事后的变化。）它使转换/动画更糟糕，但在其他一些情况下更好。它略微增加了实现的复杂性，但提高了性能（至少在Gecko中）。

我认为大多数实现还没有机会更新到第4级的新规则。但Gecko当然没有，虽然它在我要做的事情列表中（但不在顶部）。
< / LI>
很长一段时间（早在currentColor出现之前），Firefox已经实现了一个特殊的内部值作为border - * - color和outline-color的初始值。（我们也对文本装饰颜色做同样的事情，但是自1998/1999以来没有这样做。）这就像4级currentColor那样工作，所以一旦我们切换实现，我们可以统一这两件事，但我们不能不要使用3级currentColor切换我们的实现，因为它是一个重要的性能和内存命中，因为它是属性的初始值。（实际上，统一我们的实现意味着我们为每个其他具有颜色值的属性执行与这些属性相同的工作。）
text-shadow和box-shadow，当省略颜色时，明确指定了省略颜色的行为，因为它等同于4级定义currentColor的方式，即使在currentColor以这种方式工作之前： box-shadow的定义（text-shadow的定义仅指向box-shadow）。

Answer 2

省略currentColor
时，为什么Firefox中的边框有所不同

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

为什么继承不在同一元素上使用颜色值？

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

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

就像我说的那样，这是错误的实施。

有没有办法使用相同的属性并切换颜色？（对于边框颜色，您可以通过重置它在示例中看到）

如何明确复制而不是继承？这将给你最好的结果，而不会导致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>

了解css继承了currentColor

现在让我们继承颜色：

Resutls：

问题：

2 个答案: