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()