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 */
}