【CSS】round()について

どうも、くまだです。

CSSのround()についてのメモ。

CSSのround()

CSSのround()関数は、指定した値をステップ値の整数倍に丸める関数です。

構文としては以下のようになります。

round(丸める方法, 丸めたい値, 丸め幅)

CSSで記述すると以下のようになります。

.box{
  width: round(up, 101px, 100px);   /* 200px */
  height: round(down, 101px, 100px); /* 100px */
  font-size: round(nearest, 1.33rem, 0.25rem); /* 1.25rem */
}

使える値は以下のものがあります。

nearest：デフォルト値（上か下の倍数で近いほうの数値）

up：切り上げ

down：切り捨て

to-zero：ゼロに近い方向に丸める

例えば以下の場合200pxになります。

 round(up, 101px, 100px);

丸めたい値が101px、ステップ値が100pxです。

101pxを100pxで割ると1.01になり、それをupで切り上げているので「2」になります。

2x100px＝200px、ということになります。

使う場面がイマイチ思い浮かばないです笑

ここまで読んでくださりありがとうございました。