边框宽度：继承不起作用

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 demo

Answer 1

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

border-bottom-width: the absolute length or 0 if border-bottom-style is none or hidden

由于父级没有定义border-style，继承的宽度为0。如果给父级指定了border-style，它的宽度将被继承

边框宽度：继承不起作用

border-width: inherit not working

html

css

border