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等测试过了。

Jsfiddle demo

Answer 1

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

border-bottom-width：绝对长度，如果border-bottom-style为none或者隐藏
，则为0

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

border-width：继承不起作用

1 个答案: