CSS函數(shù)公式作為CSS中的重要組成部分，經(jīng)常被用來描述樣式規(guī)則中的數(shù)值計(jì)算，尤其是在響應(yīng)式設(shè)計(jì)中。

@media (min-width: 768px) {
.box {
width: 100% - 20px;
}
}

上面代碼展示了一個(gè)使用CSS函數(shù)公式計(jì)算元素寬度的例子。它通過關(guān)鍵字“calc”將一個(gè)百分比值和像素值相減得到一個(gè)新的像素值。注意，當(dāng)使用CSS函數(shù)公式時(shí)，必須在操作符兩邊添加空格。

.box {
height: var(--height) * 2;
width: calc(min(100%, var(--width)));
}

上述代碼展示了兩個(gè)常見的CSS函數(shù)公式：var() 和 calc()。 var() 函數(shù)接受一個(gè)自定義屬性值，并將其作為值返回到CSS規(guī)則中的其他屬性中。calc() 函數(shù)接受數(shù)學(xué)表達(dá)式并計(jì)算表達(dá)式中的值。

.box {
background: linear-gradient(90deg, var(--color-light), var(--color-dark)) center;
}

在以上代碼中，我們使用了另一個(gè)常見的CSS函數(shù)公式：linear-gradient()。該函數(shù)用于在元素的背景上創(chuàng)建一個(gè)色彩漸變。在此例中，我們定義了從左到右的90度的線性漸變。

CSS函數(shù)公式可以實(shí)現(xiàn)各種復(fù)雜的樣式計(jì)算。了解常見的CSS函數(shù)公式，將有助于開發(fā)人員更好的控制網(wǎng)站的樣式和布局。