css - 如何将 CSS calc() 与继承一起使用？

Question

我想这样inherit使用calc()：

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

但它似乎不起作用。

是浏览器错误还是规格？

Answer 1

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

所以简单地说，规范不允许使用inherit这种方式。

考虑到这一点，为了将继承的属性值用作子声明的一部分，请创建一个将被继承的自定义属性：

#foo {
  --duration: 10s;
  animation-duration: var(--duration);
}
#foo > .bar {
  /* --duration is automatically inherited - no need for inherit keyword */
  animation-duration: calc(var(--duration) + 2s); /* =12s */
}