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>

列印頁面