すべての主要なエンジンで、CSS の階段値数学関数がサポートされるようになりました。 round(), mod(), および rem() です。
階段状関数はすべて、指定された値を別の値に従って変換し、 ステップ値。
round() 関数
round() 関数は、四捨五入される値を受け取ります。
丸め間隔、オプションの丸め戦略があります。
値は丸め処理方法に従って四捨五入されます。
丸め間隔の最も近い整数の倍数になります。
四捨五入する値または四捨五入された区間は、CSS である必要があります 設定します。両方の値をハードコードすることもできますが、 自分で値を計算できる場合は、小数点以下を四捨五入する必要があります。
次の CSS は、--my-font-size の値を 1rem の間隔で丸めます。
font-size: round(var(--my-font-size), 1rem);
デフォルトの丸め戦略は nearest です。前の例では
丸め戦略は次のとおりです。
font-size: round(nearest,var(--my-font-size), 1rem);
丸め方法で使用可能な値は次のとおりです。
up: JavaScript のMath.ceil()メソッドと同じです。値を切り上げます 丸め間隔の最も近い整数の倍数に変換されます。down: JavaScript のMath.floor()メソッドと同じです。値を四捨五入する 丸め間隔の最も近い整数の倍数に切り捨てられます。nearest（デフォルト）: JavaScript のMath.round()と同じです。四捨五入 丸め間隔の最も近い整数の倍数までスケールアップまたはスケールダウンします。to-zero: JavaScript のMath.trunc()メソッドと同じです。値を四捨五入する ゼロに近い丸め間隔の最も近い整数の倍数に設定されます。
round() の詳細:
The New CSS Math: round()、
ダン・ウィルソン（Dan Wilson）によるものです。
rem() 関数と mod() 関数
CSS 関数 rem() と mod() の動作は JavaScript と同様です
余り演算子（%）を使用します。これらは 2 つの値を取ります。1 つ目の値（被除数）を 2 つ目の除数（除数）で除算し、
余りが返されます。
margin: rem(18px, 5px); /* returns 3px */
2 つの関数の違いは、rem() は常に符号を受け取る点です。
被除数の総和です。したがって、最初の値が正の数であれば、
正の値になります。mod() 関数は除数の符号を取ります。
rem() と mod() の詳細:
「The New CSS Math: rem() と mod()」
ダン・ウィルソン（Dan Wilson）によるものです。