如何将CSS calc()与继承一起使用? [英] How can I use CSS calc() with inherit?

问题描述

我想像这样将 inherit 与 calc()一起使用:

I would like to use inherit with calc() like this:

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

但是它似乎不起作用.

是浏览器的错误还是规格?

Is it browsers bug or specs?

推荐答案

inherit 关键字只能作为值存在于属性声明中.它不能与其他作为值一起使用，因为它本身就是一个值.这意味着它也不能与 calc()之类的函数一起使用.参见 CSS2.1 和

The inherit keyword can only exist alone as a value in a property declaration. It cannot be used with anything else as a value, because it's a value in and of itself. This means it cannot be used with functions like calc() either. See CSS2.1 and css3-cascade.

因此，简单地说，规范不允许以这种方式使用 inherit .

So to put it simply, the spec doesn't allow using inherit that way.

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

With this in mind, in order to use an inherited property value as part of a child declaration, make a custom property which will be inherited instead:

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

这篇关于如何将CSS calc()与继承一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！