このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

blur()”関数CSS3で追加

記事Jul.27th,2021
入力画像にガウスぼかしをかけるCSSの関数、“blur()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

blur()”関数

blur()”関数は入力画像にガウスぼかしをかけるための関数です。

<filter-function>”値として使用することができ、filter”プロパティで要素にぼかしをかけることができます。

引数は1個の<length>”値で、ぼかしの標準偏差を表します。なお、<percentage>”値は使用できません。また、負の値は無効です。

blur(〚“<length>”値〛)

省略時の既定値は“0px”です。また、補間時の初期値は“0px”です。

使用例

.filter-0 { filter: blur(0px);}
.filter-2 { filter: blur(2px);}
.filter-4 { filter: blur(4px);}
.filter-6 { filter: blur(6px);}
.filter-8 { filter: blur(8px);}
.filter-10 { filter: blur(10px);}
blur(0px)
blur(2px)
blur(4px)
blur(6px)
blur(8px)
blur(10px)

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
blur()
定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク