如果未设置border-color，则它将继承元素的颜色

Question

p.para {
  color: red;
  border-style: ridge;
  border-width: 10px;
}

<p class="para">When one value is specified, it applies the same color to all four sides.When two values are specified, the first color applies to the top and bottom, the second to the left and right.When three values are specified, the first color applies to the top,
  the second to the left and right, the third to the bottom.When four values are specified, the colors apply to the top, right, bottom, and left in that order (clockwise).</p>

我没有为边框指定颜色，而是设置了字体颜色。我读到了“如果未设置border-color，它将继承元素的颜色。” 。边框颜色应为红色。但是，我看到黑色边框。

任何人都可以解释此行为吗？

Answer 1

来自specification：

  

如果未使用border属性指定元素的边框颜色 ，   用户代理必须使用元素的“颜色”属性的值作为   边框颜色的计算值。

后来我们可以阅读

  

所有边框均绘制在框背景的顶部。 颜色   为“凹槽”，“山脊”，“插入”和“起始”的值绘制的边框   取决于元素的边框颜色属性，但UA可以选择   他们自己的算法来计算实际使用的颜色。

因此对于某些border-style来说，当前的颜色不是必需的，每个浏览器可以对此进行不同的处理，因此在所有浏览器中渲染的颜色都不相同。

以下代码将在Chrome和Firefox中产生不同的结果：

p.para {
  color: red;
  border-style: solid;
  border-width: 10px;
}

<p class="para">this is solid</p>
<p class="para" style="border-style: ridge;">this is ridge</p>
<p class="para" style="border-style: groove;">this is groove</p>
<p class="para" style="border-style: ridge solid;">this is ridge and solid</p>
<p class="para" style="border-style: dashed;">this is dashed</p>
<p class="para" style="border-style: groove;border-color:red;">this is groove with color</p>

Chrome上的结果

在Firefox上的结果