如果未设置border-color，则它将继承元素的颜色 [英] If border-color is not set, it inherits the color of the element

问题描述

  p.para {红色;边框样式:脊;border-width:10px;}  

 < p class ="para">指定一个值时，它将相同的颜色应用于所有四个侧面.当两个值相同时指定时，第一种颜色适用于顶部和底部，第二种颜色适用于左侧和右侧.指定了三个值后，第一种颜色适用于顶部，</p>  

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

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

解决方案

来自

在Firefox上的结果

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>

I haven't specified color for the border and I have set font color. I read that "If border-color is not set, it inherits the color of the element." which means. Border color should be red. But, I am seeing black border.

Can anyone explain the behavior of this?

解决方案

From the specification:

If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.

And later we can read

All borders are drawn on top of the box's background. The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's border color properties, but UAs may choose their own algorithm to calculate the actual colors used.

So for some border-style it's not necessary the current color and each browser may handle this differently thus the rendring is not the same within all the browsers.

The below code will give different results with Chrome and 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>

Result on Chrome

Result on Firefox

这篇关于如果未设置border-color，则它将继承元素的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！