CSSシークレット ―47のテクニックでCSSを自在に操る

図4.21 のように、かなり期待に近い表示になりました。中央部分では

ぼかしの効果が完全に現れています。しかし、縁に近い部分では弱いぼか

しになってしまっています。ぼかしの半径の分だけ、完全にぼかされる範

囲が狭まるためです。擬似要素の背景色として

redを指定すると、状

況を理解しやすくなるでしょう（図4.22 ）。

 position:absolute;

 top:0;right:0;bottom:0;left:0;

 filter:blur(20px);

}

183

シークレット18：曇りガラスの効果

図4.18

擬似要素がテキストを覆っている

図4.19

縁でのぼかしが弱い問題は解消した

が、要素の外側までぼかされてしまっ

ている

この問題に対処するには、擬似要素をぼかしの半径の分だけ大きくする

必要があります。マージンとして、 ‐20pxを指定します。ぼかしのアルゴ

リズムがブラウザごとに異なる可能性があるため、安全策としてより小さ

い値を指定してもよいでしょう。ただし、こうすると図 4.19 のように縁

の近くでぼかしが弱まることはなくなりますが、要素の外までぼかしが広

がってしまいます。これでは、曇りガラスではなく黒ずみのようです。こ

の問題は、 mainに over