border-color失败并具有继承值

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）“工作”，即你的意思是什么，而不是做必须< / em>按规格做。根据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继承关键字是全有或全无，所以它不能用于速记。您获得的结果反映了对“无效”的不一致解释。规则。

另请参阅：this discussion。

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

border-color: inherit transparent;

您应该使用：

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

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