边框颜色失败，并显示继承值

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这样。

涉及一个 Opera 错误，但错误是值transparent inherit（和transparent transparent inherit）"有效"，即按照您的意思做，而不是按照规范做它必须做的事情。根据 CSS 错误处理规则，当值在语法上格式不正确时，必须忽略声明。（Chrome 与 Opera 共享此错误，但 Firefox 和 IE 做了正确的事情。

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

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>

Answer 2

经过一番谷歌搜索，看起来 CSS inherit 关键字是全有或全无的，所以它不能速记使用。您得到的结果反映了对"无效"规则的不一致解释。

另请参阅：此讨论。

不过，只要规则声明全部有效，您应该能够覆盖要继承的特定属性。IE 而不是：

border-color: inherit transparent;

您应该使用：

border-color-left: transparent;
border-color-right: transparent;

不幸的是，我认为你不能让它比这更短。