blur() は CSS の関数で、入力画像にガウシアンぼかしを適用します。返値は <filter-function> です。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
blur(radius)
引数
radius- ぼかしの半径で、
<length>で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。0の値は入力を変更しません。補間時の欠損値は0です。
例
ピクセル数と rem を用いた blur の設定
blur(0) /* 効果なし */
blur(8px) /* 半径 8px でぼかす */
blur(1.17rem) /* 半径 1.17rem でぼかす */仕様書
| 仕様書 | 状態 |
|---|---|
| Filter Effects Module Level 1 blur() の定義 |
草案 |