ホームページ > 記事 > ウェブフロントエンド > CSSでぼかし距離を設定するにはどうすればよいですか?
CSS (Cascading Style Sheets) は、Web サイトのビジュアルをデザインするための強力なツールです。 Blur 効果は、Blur を使用して要素のプロパティをぼかすために使用される CSS の多くの機能の 1 つです。柔らかく夢のような効果を作成したり、ページ上の特定の要素に注目を集めたりするには、ぼかし効果を使用できます。
###文法### リーリー「blur」プロパティを使用して CSS でぼかし距離を適用する方法
たとえば、画像にぼかし効果を適用するには、次の CSS コードを使用できます -
リーリーここでは、「img」要素を選択し、それに 5 ピクセルのぼかし効果を適用しました。
例 1
Web ページ内のさまざまな要素にさまざまなファジー距離を適用できます。これを行うには、各要素を個別に選択し、「blur」プロパティを目的の値に設定します。例えば -### リーリー
ここでは、最初の "h1" と 2 番目の "img" の 2 つの要素を選択し、それに応じて 3 ピクセルと 5 ピクセルのぼかし効果を適用しました。例 2: 異なる要素に異なるぼかし距離を適用する
リーリー
CSS で距離をぼかしたフォーカス効果を作成するここでは、ユーザーが「blur」クラスの上にマウスを移動したときに、「blur」クラスのすべての子要素に「blur」属性を適用します。 「no」疑似クラスを使用するとクラス「no-blur」の要素がブラー効果から除外されるため、この効果はクラス「no-blur」の要素には機能しません。
例 3
これは、上記のメソッドの完全なコード例です。
リーリー ###結論は###以上がCSSでぼかし距離を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。