CSS - 我可以在 Calc() 中使用对象的宽度吗？

Question

我想要这样的东西：

height: calc(width + 5px);

这只是一个小例子，但我最终正在寻找一种将设置宽度用作计算的一部分的方法，而不是一种更简单的解决示例的方法。我所做的任何搜索都只是举例说明如何使用calc() 设置宽度。谢谢！

Answer 1

最接近纯 CSS 的方法是将 CSS 变量与 calc 结合起来

:root {
	--width: 100px;
}
div {
	border: 1px solid red;
	height: calc(var(--width) + 5px);
	width: var(--width);
}

<div>
test
</div>

这将让您定义一个 CSS 变量 --width 并使用它来计算 div 的新高度。