边框颜色因继承值而失败

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

为什么这些 "first value inherit" 边框颜色会失败？

Answer 1

经过谷歌搜索后，CSS inherit 关键字似乎是全有或全无，因此不能在 shorthand 中使用。您得到的结果反映了对 'invalid' 规则的不一致解释。

另请参阅：this discussion。

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

border-color: inherit transparent;

你应该使用：

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

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

Answer 2

失败，因为根据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>

边框颜色因继承值而失败

border-color fails with inherit value

css

inheritance

opera

border-color