非正方形の PNG 画像に CSS ドロップ シャドウを作成するにはどうすればよいですか?

非正方形 PNG 画像の CSS ドロップ シャドウ効果

CSS を使用して非正方形 PNG 画像にドロップ シャドウ効果を作成するのは難しい場合があります。 box-shadow プロパティを使用する標準的なアプローチでは、画像の輪郭に従わない正方形の影が生成されます。

幸いなことに、filter プロパティを使用する解決策があります。

フィルターの使用:dropShadow()

フィルター:dropShadow() プロパティを使用すると、ぼやけた影を作成できますカスタム オフセットとカラーを使用した効果:

filter: drop-shadow(x y blur color);

ここで:

• x と y はシャドウの水平オフセットと垂直オフセットを表します
• ぼかしはぼかしの半径を決定します影の
• 色は影ですcolor

CSS の例:

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

インラインの例:

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="非正方形の PNG 画像に CSS ドロップ シャドウを作成するにはどうすればよいですか?" >

このテクニックにより、非正方形の PNG 画像の形状に正確に従うドロップ シャドウ エフェクトを作成し、画像にリアルな深さと奥行きを与えます。次元。

以上が非正方形の PNG 画像に CSS ドロップ シャドウを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。