如何将CSS calc()与inherit一起使用？
如何将CSS calc()与inherit一起使用？
提问于 2014-02-06 22:42:50
我想在calc()中使用inherit，如下所示：
#foo {
animation-duration: 10s;
}
#foo > .bar {
animation-duration: calc(inherit + 2s); /* =12s */
}但它似乎不起作用。
是浏览器的bug还是规范？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-02-06 23:22:50
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 */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21605946
复制相关文章
相似问题