边框宽度中的CSS calc（）？

Posted 2023-03-06

【中文标题】边框宽度中的CSS calc（）？

【英文标题】：CSS calc() in border-width?

【发布时间】：2014-06-09 11:08:28

【问题描述】：

我可以将 calc() 与边框宽度一起使用吗？

我希望以下 CSS 工作：

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

但无论出于何种原因，我为calc() 提供的任何值都不会导致任何边界。我在 MDN 上找到的文档不清楚是否可以使用 calc - 它说我应该使用 Any <length> value，但这是否包括 calc？

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

【问题讨论】：

border-width 不能使用 % 值，因为任何 % 都与元素的大小无关。所以，基本上......不，你不能使用 calc WITH % 作为边框宽度。

@Paulie_D：是的，事实证明我实际上可以使用 calc(1em + 5px)，例如。如果您将该评论作为答案，我可以将其标记为解决方案。

【参考方案1】：

不幸的是，border-width 不能使用 % 值，因为任何 % 都与元素的大小无关。

所以，基本上......不你不能使用calc WITH % 作为边框宽度，因为它不知道它应该是什么。

【讨论】：

我尝试将它与“vw”单位一起使用，该单位基于视口宽度的百分比。视口宽度是相对于窗口的，它不会相对于 DOM 中的不同元素而改变。这在这里也行不通！这是怎么回事？