CSS round() 関数

定義と使用法

CSSの round() 関数は指定された四捨五入の戦略に基づいて、数字を最も近い四捨五入の間隔の整数倍に四捨五入します。

例

使用 round() 指定された四捨五入の戦略に基づいて、数字を最も近い四捨五入の間隔の整数倍に四捨五入します：

div.box2 {
  height: round(up, 105px, 25px);
}
div.box3 {
  height: round(down, 120px, 25px;
}
div.box4 {
  height: round(to-zero, 115px, 25px);
}

自分で試してみる

CSS 语法

round(rounding-strategy, valuetoround, roundinginterval)
値 説明
rounding-strategy

オプション。四捨五入の戦略を指定します。以下のいずれかの値ができます：

  • nearest：デフォルト値。valuetoround 値を最も近い roundinginterval の整数倍に四捨五入します。
  • up：valuetoround 値を最も近い roundinginterval の整数倍に四捨五入します。
  • down：valuetoround 値を最も近い roundinginterval の整数倍に四捨五入します。
  • to-zero：valuetoround 値を最も近い roundinginterval の整数倍に四捨五入し、0 に近づけます。
valuetoround 必須。四捨五入する値（数字、パーセンテージ、サイズまたは数学的表現）。
roundinginterval 必須。四捨五入の間隔（数字、パーセンテージ、サイズまたは数学的表現）。

技術的な詳細

バージョン： CSS4

ブラウザのサポート

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
125 125 118 15.4 111

関連ページ

参考：CSS acos() 関数

参考：CSS asin() 関数

参考：CSS atan() 関数

参考：CSS atan2() 関数

参考：CSS calc() 関数

参考：CSS cos() 関数

参考：CSS exp() 関数

参考：CSS hypot() 関数

参考：CSS log() 函数

参考：CSS mod() 函数

参考：CSS pow() 函数