border-width:继承不起作用

Question

我试图让子元素采用border-width父元素.

我已将问题减少到以下代码.

.first, .second {
    border-color: red;
    border-width: 5px;
    background: #eee;
}

.first span {
    border-width: 2px;
    border-color: inherit;
    border-style: solid;
}

.second span {
    border-width: inherit;
    border-color: green;
    border-style: solid;
}

<p class="first"><span>'border-color: inherit' works</span></p>
<p class="second"><span>'border-width: inherit' does not work</span></p>

正如你所看到的那样,border-color: inherit效果很好span.但是,border-width: inherit不是同样的工作span.

我已经测试过chrome,firefox和ie.

Jsfiddle演示

Answer 1

摘自MDN https://developer.mozilla.org/en-US/docs/Web/CSS/border-width

border-bottom-width:绝对长度,如果border-bottom-style为none或者hidden,则为0

由于父级没有定义边框样式,因此继承的宽度为0.如果为父级指定边框样式,则其宽度将被继承