CSS 函数 - round()

CSS 的 round() 函数返回一个根据特定舍入方法确定的舍入后的数字。

作者可以使用自定义 CSS 属性（例如 --my-property）来指定舍入值、间隔或两者。如果这些值已经知道，则使用 round() 函数就变得多余了。

可能的值

round(<rounding-strategy>, valueToRound, roundingInterval) 函数接受三个参数。第一个是要舍入的值，第二个是精度数字。

然后根据指定的 rounding-strategy，将 valueToRound 舍入到 roundingInterval 的最接近的整数倍。

<rounding-strategy> - 舍入策略可以具有以下值之一

up - 将 valueToRound 舍入到 roundingInterval 的最接近的整数倍。如果该值为负数，则将其调整为更正的值。此操作等效于使用 JavaScript 方法 Math.ceil()。
down（默认） - 将 valueToRound 舍入到 roundingInterval 的最接近的整数倍。如果该值为负数，则将其调整为更负的值。此操作等效于使用 JavaScript 方法 Math.floor()。
nearest - 将 valueToRound 舍入到 roundingInterval 的最接近的整数倍，该整数倍可能在该值的上方或下方。如果 valueToRound 正好位于上方和下方的舍入目标的中间（两者都不是nearest），则进行向上舍入。这类似于使用 JavaScript 方法 Math.round()。
to-zero - 将 valueToRound 舍入到更接近零的 roundingInterval 的最接近的整数倍。此操作类似于使用 JavaScript 的 Math.trunc() 方法。

valueToRound - 要舍入的值必须是 <number>、<dimension> 或 <percentage>，或解析为这些类型之一的数学表达式。
roundingInterval - 舍入间隔可以是 <number>、<dimension> 或 <percentage>，或解析为这些值之一的数学表达式。

返回值

valueToRound 的值将根据所选的 rounding strategy 舍入到 roundingInterval 的最近的较低或较高整数倍。

如果 roundingInterval 为 0，则结果将为 NaN（非数字）。
当 valueToRound 和 roundingInterval 均为无限时，结果为 NaN（非数字）。
如果 valueToRound 为无限大但 roundingInterval 为有限大，则结果保持为相同的无限值。
如果 valueToRound 为有限大但 roundingInterval 为无限大，则结果由舍入策略和 valueToRound 的符号决定

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 位于 roundingInterval 的两个倍数之间，则它认为较低的倍数更接近 −∞，而较高的倍数更接近 +∞。

语法

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

round() 属性仅受 Firefox 浏览器支持

CSS round() - 基本示例

以下示例演示了 round() 函数如何根据不同的舍入策略修改元素的尺寸。

 
<html>
<head>
<style>
   body {
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
   }
   .box {
      width: 200px;
      height: 100px;
      margin: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      border: 2px solid black;
      background-color: lightblue;
      --rounding-interval: 20px;
   }
   .exact {
      width: calc(100px + 40px);
   }
   .up {
      width: round(up, 102px,var(--rounding-interval));
   }
   .down {
      width: round(down, 119px, var(--rounding-interval));
   }
   .to-zero {
   width: round(to-zero, 115px, var(--rounding-interval));
   }
   .nearest {
   width: round(121px, 25px)
   }
</style>
</head>
<body>
Check the proper working on Firefox Browser
<div class="box exact">Exact Value 140px</div>
<div class="box up">102px Rounded Up to 120px</div>
<div class="box down">119px Rounded Down to 100px</div>
<div class="box to-zero">115px Rounded to-zero to 100px</div>
<div class="box nearest">121px Rounded to-nearest to 125px</div>
</body>
</html>

打印页面