css - 边框颜色因继承值而失败

Question

我最近发现边框颜色有问题。

border-color: inherit //work
border-color: inherit transparent //fail
border-color: transparent inherit //work
border-color: inherit transparent transparent //fail
border-color: inherit transparent transparent transparent //fail

为什么这些“第一个值继承”的边框颜色会失败？

Answer 1

失败是因为根据 border-color 的定义, 关键字 inherit 只能作为属性本身的值，不能与其他值一起作为组件。是这样描述的

    [ <color> | transparent ]{1,4} | inherit

表示:您可以有一到四个组件，每个组件要么是颜色指定，要么是关键字transparen，或 inherit as这样的。

涉及 Opera 错误，但错误是值 transparent inherit(和 transparent transparent inherit)“有效”，即按照您的意思执行，而不是按照规范做必须做的事情。根据 CSS 错误处理规则，当值的语法格式错误时，必须忽略该声明。 (Chrome 与 Opera 共享此错误，但 Firefox 和 IE 做了正确的事情。)

比如要实现你所说的border-color: transparent inherit(即设置上下边框颜色透明，左右边框颜色继承)，需要单独设置border组件在单独的声明中以一种或另一种方式，例如

div { border-color: red }
span {
  border-style: solid;
  border-color: transparent;
  border-left-color: inherit;
  border-right-color: inherit;
}

<div>
  <span>Hello world</span>
</div>