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()函数本身只接受文字数值,如数字,维度和百分比.

简而言之,规范不允许使用inherit这种方式.