CSS函数 round（） 返回一个由特定舍入方法确定的舍入数。
作者可以使用自定义 CSS 属性（例如 --my-property）来指定舍入值和/或间隔。如果这些值已经知道，那么使用 round（） 函数就变得多余了。
可能的值
函数 round（<rounding-strategy>， valueToRound， roundingInterval） 采用三个参数。第一个是要舍入的值，第二个是精度数字。
然后，根据指定的 ，rounding-strategy，将 valueToRound 四舍五入为 roundingInterval 的最接近的整数倍。
- <rounding-strategy> - 舍入策略可以具有以下值之一：
- up - 将 valueToRound 向上舍入到 roundingInterval 的最接近的整数倍。如果该值为负数，则将调整为更正的值。此操作等同于使用 JavaScript 方法 Math.ceil（）。
- down（default） - 将 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 的值根据所选的舍入策略舍入为 roundingInterval 的最接近的较低或较大整数倍。- 如果 roundingInterval 为 0，则结果将为 NaN（Not a Number）。
- 当 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>、<维度> 或 <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>
