CSS calc with inherit

Question

我想将inherit与calc()一起使用，如下所示：

#foo {
  animation-duration: 10s;
}
#foo > .bar {
  animation-duration: calc(inherit + 2s); /* =12s */
}

但它似乎不起作用。

是浏览器错误还是规格？

Answer 1

inherit关键字只能作为属性声明中的值单独存在。它不能与其他任何一起用作值，因为它本身就是一个值。这意味着它不能与calc()之类的函数一起使用。请参阅CSS2.1和css3-cascade。

此外，calc()函数本身only takes literal numeric values such as numbers, dimensions and percentages。

简而言之，规范不允许以这种方式使用inherit。