round()

語法

width: round(var(--width), 50px);
width: round(up, 101px, var(--interval));
width: round(down, var(--height), var(--interval));
margin: round(to-zero, -105px, 10px);

引數

round(<rounding-strategy>, valueToRound, roundingInterval) 函式指定一個可選的舍入策略，一個要舍入的值（或數學表示式）和一個舍入間隔（或數學表示式）。valueToRound 根據舍入策略舍入到 roundingInterval 的最近整數倍。

<rounding-strategy>

舍入策略。可以是以下值之一

up

將 valueToRound 向上舍入到 roundingInterval 的最近整數倍（如果值為負，它將變得“更正”）。這等同於 JavaScript Math.ceil() 方法。

down

將 valueToRound 向下舍入到 roundingInterval 的最近整數倍（如果值為負，它將變得“更負”）。這等同於 JavaScript Math.floor() 方法。

nearest（預設）

將 valueToRound 舍入到 roundingInterval 的最近整數倍，該整數倍可能高於或低於該值。如果 valueToRound 介於上方和下方的舍入目標之間（都不是“最近”），它將被向上舍入。等同於 JavaScript Math.round()。

to-zero

將 valueToRound 舍入到 roundingInterval 的最近整數倍，使其更接近/趨向於零（正數會減小，而負數會變得“不那麼負”）。這等同於 JavaScript Math.trunc() 方法。

valueToRound

要舍入的值。這必須是 <number>、<dimension> 或 <percentage>，或者是一個解析為這些值之一的數學表示式。

roundingInterval

舍入間隔。這是一個 <number>、<dimension> 或 <percentage>，或者是一個解析為這些值之一的數學表示式。如果 valueToRound 是 <number>，則可以省略 roundingInterval，預設值為 1。否則，省略它將導致無效表示式。

返回值

valueToRound 的值，根據 rounding strategy 舍入到 roundingInterval 的最近較低或較高整數倍。

• 如果 roundingInterval 為 0，則結果為 NaN。

• 如果 valueToRound 和 roundingInterval 都是 infinite，則結果為 NaN。

• 如果 valueToRound 是無限的但 roundingInterval 是有限的，則結果是相同的 infinity。

• 如果 valueToRound 是有限的但 roundingInterval 是無限的，則結果取決於舍入策略和 A 的符號

  • up - 如果 valueToRound 為正（非零），返回 +∞。如果 valueToRound 是 0⁺，返回 0⁺。否則，返回 0⁻。
  • down - 如果 valueToRound 為負（非零），返回 −∞。如果 valueToRound 是 0⁻，返回 0⁻。否則，返回 0⁺。
  • nearest, to-zero - 如果 valueToRound 為正或 0⁺，返回 0⁺。否則，返回 0⁻。

• 引數計算可以解析為 <number>、<dimension> 或 <percentage>，但必須具有相同的型別，否則函式無效；結果將具有與引數相同的型別。

• 如果 valueToRound 恰好等於 roundingInterval 的整數倍，round() 將精確解析為 valueToRound（如果相關，則保留 valueToRound 是 0⁻ 還是 0⁺）。否則，roundingInterval 有兩個整數倍可能“最接近” valueToRound，較低的 roundingInterval 更接近 −∞，較高的 roundingInterval 更接近 +∞。

正式語法

<round()> = 
  round( <rounding-strategy>? , <calc-sum> , <calc-sum>? )  

<rounding-strategy> = 
  nearest  |
  up       |
  down     |
  to-zero  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

示例

舍入正值

此示例演示了 round() 函式的舍入策略如何處理正值。

在下面的五個框中，round() 函式用於設定最後四個框的高度。在每種情況下，要舍入的值介於 100 畫素和 125 畫素之間，舍入值在所有情況下均為 25 畫素。因此，框的高度要麼向上舍入到 125 畫素，要麼向下舍入到 100 畫素。

HTML

HTML 定義了 5 個 div 元素，這些元素將由 CSS 渲染為框。這些元素包含指示舍入策略、初始值和框的預期最終高度（括號中）的文字。

<div class="box box-1">height: 100px</div>
<div class="box box-2">up 101px (125px)</div>
<div class="box box-3">down 122px (100px)</div>
<div class="box box-4">to-zero 120px (100px)</div>
<div class="box box-5">nearest 117px (125px)</div>

CSS

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

應用於所有框的 CSS 如下所示。請注意，我們應用了一個名為 --rounding-interval 的自定義 CSS 屬性，我們將用於舍入間隔。

div.box {
  width: 100px;
  height: 100px;
  background: lightblue;
  --rounding-interval: 25px;
}

從左邊開始的第一個 div 沒有特定的 CSS 規則，因此它的預設高度為 100px。div 二、三和四的 CSS 如下所示，它們分別進行舍入、向上舍入、向下舍入和向零舍入。

div.box-2 {
  height: round(up, 101px, var(--rounding-interval));
}
div.box-3 {
  height: round(down, 122px, var(--rounding-interval));
}
div.box-4 {
  height: round(to-zero, 120px, var(--rounding-interval));
}

請注意，上面我們如何使用 var() 和自定義 CSS 屬性 --rounding-interval 來指示舍入間隔。

最後一個框未指定舍入策略，因此預設採用 nearest。在這種情況下，最接近 117 畫素的間隔是 125 畫素，因此它將向上舍入。為了對比，這裡我們為舍入值和間隔都指定了硬編碼值。雖然允許這樣做，但通常不會這樣做，因為當您已經知道結果時，舍入一個數字是沒有意義的。

div.box-5 {
  height: round(117px, 25px);
}

結果

如果瀏覽器支援 CSS round() 函式，您應該會看到五個列，其高度按其包含的文字指示進行舍入。

規範

瀏覽器相容性

另見

• mod()
• rem()