CSS calc()的边框宽度? [英] CSS calc() in border-width?

问题描述

我可以使用具有边框宽度的calc()吗?

我想使用以下CSS:

.my-element {
  border-left-width: calc(10% + 10px);
  border-right-width: calc(10% + 20px);
}

但是无论出于什么原因，我为calc()提供的任何值都不会产生边界.我在 MDN 平台上找到的文档不清楚是否可以使用calc-它说我应该使用Any <length> value，但是其中包括calc吗?

But for whatever reason, any value I provide with calc() results in no border at all. The documentation I've found on MDN aren't clear about whether calc can be used - it says that I should use Any <length> value, but does that include calc?

我以IE9为目标，但是在Chrome 34和Firefox 28中我得到了相同的结果.我知道我可以一直使用jQuery来实现这些目标，但是我想尽可能避免使用它.

I target IE9, but I get the same results in Chrome 34 and Firefox 28. I know I can alsway use jQuery to achieve these things, but I want to avoid it if at all possible.

推荐答案

不幸的是，border-width无法使用％值，因为任何％与元素的大小都不相关.

Unfortunately, border-width cannot use a % value as any % is NOT related to size of the element.

因此，基本上... 否，您不能使用calc WITH％表示边界宽度，因为它不知道它应该是％的什么.

So, basically...NO you can't use calc WITH % for border-width because it doesn't know what it's supposed to be a % of.

这篇关于CSS calc()的边框宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！