round()

round(<rounding-strategy>, valueToRound, roundingInterval) 函数指定一个可选的舍入策略、要舍入的值（或数学表达式）和一个舍入间隔（或数学表达式）。valueToRound 将根据舍入策略舍入到 roundingInterval 的最接近的整数倍数。

<rounding-strategy>

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

up

将 valueToRound 向上舍入到 roundingInterval 的最接近的整数倍数（如果该值是负数，它将变得“更正”。）。这等效于 JavaScript 的 Math.ceil() 方法。

down

将 valueToRound 向下舍入到 roundingInterval 的最接近的整数倍数（如果该值是负数，它将变得“更负”。）。这等效于 JavaScript 的 Math.floor() 方法。

nearest (default)

将 valueToRound 舍入到 roundingInterval 的最接近的整数倍数，该倍数可能在该值之上或之下。如果 valueToRound 在其上方的舍入目标和其下方的舍入目标之间是中间值（两者都不“最接近”），则它将向上舍入。等效于 JavaScript 的 Math.round()。

to-zero

将 valueToRound 舍入到 roundingInterval 的最接近的整数倍数，该倍数更接近零（正数将减小，而负值将变得“不太负”。）。这等效于 JavaScript 的 Math.trunc() 方法。

valueToRound

要舍入的值。这必须是一个<number>、<dimension>或<percentage>，或解析为其中之一的值的数学表达式。

舍入间隔

舍入间隔。这是一个<number>、<dimension>或<percentage>，或解析为其中之一的值的数学表达式。

valueToRound的值，舍入到roundingInterval的最近的较低或较高整数倍数，具体取决于舍入策略。

• 如果roundingInterval为0，则结果为NaN。
• 如果valueToRound和roundingInterval都为infinite，则结果为NaN。
• 如果valueToRound为infinite，但roundingInterval为finite，则结果为相同的infinity。
• 如果valueToRound为finite，但roundingInterval为infinite，则结果取决于舍入策略和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 px和125 px之间，并且在所有情况下舍入值为25px。因此，框的高度将舍入到125 px或舍入到100 px。

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;
  padding: 5px;
  --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 px 的最近间隔是 125px，因此它将向上舍入。仅仅是为了对比，这里我们为舍入值和间隔都指定了硬编码的值。虽然这是允许的，但通常你不会这样做，因为当你已经知道结果必须是什么时，就没有必要舍入一个数字。

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

结果

如果浏览器支持 CSS round()函数，你应该看到五列，它们的高度按其包含的文本指示的方式进行舍入。

• mod()
• rem()