CSS中border-width中的calc()是什么？

Question

我能在border-width里使用calc()吗？

我想要让以下CSS生效：

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

无论出于什么原因，我使用 calc() 提供的任何值都不会产生边框。我在MDN上找到的文档并没有明确说明可以使用calc - 它说我应该使用任何<length>值，但这是否包括calc呢？

我针对IE9进行了目标设置，但是在Chrome 34和Firefox 28中得到了相同的结果。我知道我可以始终使用jQuery来实现这些功能，但如果可能的话，我想避免使用它。

- MW.

---

border-width 不能使用百分比值，因为任何百分比都与元素的大小无关。所以，基本上...不，你不能在 border-width 中使用带有百分比的 calc。 - Paulie_D

@Paulie_D：没错，事实证明我实际上可以使用calc(1em + 5px)。如果你把这个评论作为答案，我就可以将其标记为解决方案。 - MW.

Answer 1

遗憾的是，border-width 不能使用百分比值作为任何百分比与元素大小无关。

所以，基本上... 不行，因为你不能使用百分比作为border-width 的计算值，因为它不知道应该是哪个部分的百分比。

- Paulie_D

---

我尝试使用基于视口宽度百分比的“vw”单位。视口宽度相对于窗口是相对的，与DOM中不同元素的相对位置无关。但这在这里也不起作用！发生了什么事？ - Steven Linn

@StevenLinn 你有找到这个问题的答案吗？ - oldboy