Rachel Andrew
發布日期：2024 年 5 月 14 日
所有主要引擎現在都支援 CSS 階梯值數學函式：round()、mod() 和 rem()。
階梯式值函式會根據另一個階梯式值轉換指定值。
round() 函式
round() 函式會採用要四捨五入的值、四捨五入間隔和選用的四捨五入策略。系統會根據四捨五入策略，將值四捨五入至最接近的四捨五入間隔整數倍數。
要捨入的值或捨入間隔，必須是 CSS 自訂屬性。雖然可以為這兩個值設定硬式編碼，但如果您可以自行計算值，就沒有必要四捨五入。
以下 CSS 會將 --my-font-size 的值四捨五入至 1rem 的間隔。
font-size: round(var(--my-font-size), 1rem);
預設捨入策略為 nearest。包含四捨五入策略的先前範例如下：
font-size: round(nearest,var(--my-font-size), 1rem);
四捨五入策略的可能值如下：
up：等同於 JavaScriptMath.ceil()方法。將值向上捨入至最接近四捨五入間隔的整數倍數。down：等同於 JavaScriptMath.floor()方法。將值向下捨去至最接近四捨五入間隔的整數倍數。nearest(預設)：等同於 JavaScriptMath.round()。將值向上或向下捨入至最接近的四捨五入間隔整數倍數。to-zero：等同於 JavaScriptMath.trunc()方法。將值四捨五入至最接近的捨入間隔 (較接近零) 整數倍數。
如要進一步瞭解 round()，請參閱 Dan Wilson 撰寫的The New CSS Math: round()。
rem() 和 mod() 函式
rem() 和 mod() CSS 函式與 JavaScript 餘數運算子 (%) 的運作方式類似。這兩個函式會採用兩個值，第一個 (除以) 除以第二個 (除數)，並傳回餘數。
margin: rem(18px, 5px); /* returns 3px */
這兩個函式之間的差異在於 rem() 一律會採用除數的符號，因此如果第一個值為正數，傳回的值也會是正數。mod() 函式會採用除數的符號。
如要進一步瞭解 rem() 和 mod()，請參閱 Dan Wilson 撰寫的新 CSS 算式：rem() 和 mod()。