It has been 1102 days since the last update, the content of the article may be outdated.

CSS 函数

CSS 函数用作各种 CSS 属性的值。所以基本上我们用它来评估一些 CSS 值。让我们看看其中的一些功能。

attr()

此函数用于访问元素属性的值。让我们通过例子来理解它。

plaintext

---- html ---
<div data-bg="black"></div>

--- css ---
div {
	width: 100px;
	height: 100px;
	backgound: arrt(data-bg);
}

你可以看到我们有一个“div”和一个“data-bg”自定义属性，现在我可以使用 attr() 在 CSS 中访问它的值。所以，这就是你可以做很多有趣的事情的方式。

所以输出将是这样的。

在 attr() 之后我们有 calc()。顾名思义，它有助于执行 CSS 值的计算。当我们想要进行精确计算时，这可能很有用。

plaintext

--- html ---
<div class="box"></div>

--- css ---
.box {
	width: calc(100px * 5 - 50px);
	height: calc(100px - 30px);
}

在上面的代码中，我使用 calc() 来设置 div 的宽度和高度。

然后我们有 max()，它需要两个值并使用该 CSS 属性的最大值。这对于制作响应式宽度和高度很有用。

plaintext

--- html ---
<div class="box"></div>

--- css ---
.box {
	width: max(50%, 500px);
	height: max(60%, 300px);
}

在这种情况下，div 将具有最大可能的宽度和高度，如果 50% 大于 500px，则其宽度将为 50%，否则为 500px，高度也是一样。

最后但并非最不重要的一点是，我们有 min()，它需要两个值并使用该 CSS 属性的最小值。这与 max() 正好相反。

plaintext

--- html ---
<div class="box"></div>

--- css ---
.box {
	width: min(50%, 500px);
	height: min(60%, 300px);
}

所以，这个输出将与我们的 max() 完全相反。它将其宽度和高度设置为最小值。