所有主要引擎現在都支援 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 的 The New CSS Math: rem()
和 mod()
。