blur()
blur()
は CSS の関数で、入力画像にガウシアンぼかしを適用します。返値は <filter-function>
です。
試してみましょう
構文
css
blur(radius)
引数
radius
-
ぼかしの半径で、
<length>
で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。0
の値は入力を変更しません。補間時の欠損値は0
です。
例
ピクセル数と rem を用いた blur の設定
css
blur(0) /* 効果なし */
blur(8px) /* 半径 8px でぼかす */
blur(1.17rem) /* 半径 1.17rem でぼかす */
仕様書
Specification |
---|
Filter Effects Module Level 1 # funcdef-filter-blur |
ブラウザーの互換性
BCD tables only load in the browser