边框颜色因继承值而失败

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 继承关键字是全有或全无，因此不能简写。您得到的结果反映了对“无效”规则的不一致解释。

另请参阅：this discussion。

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

border-color: inherit transparent;

你应该使用：

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

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