CSS で PNG 画像の形状に合わせたドロップ シャドウを作成するにはどうすればよいですか?

CSS での PNG 画像のドロップ シャドウ

CSS での PNG 画像のドロップ シャドウの作成は、特に非正方形の場合、難しい場合があります。形。ボックスシャドウを使用した一般的なアプローチでは、多くの場合、画像の形状に従わない四角形の影が生成されます。

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

filter:dropShadow() プロパティは、この問題の解決策を提供します。これを使用すると、X および Y オフセット、ぼかし半径、色を正確に制御してドロップ シャドウを適用できます。このフィルターは CSS で直接使用することも、インラインで適用することもできます。

CSS の例:

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

インラインの例:

<img  src="/static/imghwm/default1.png" data-src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" class="lazy" alt="CSS で PNG 画像の形状に合わせたドロップ シャドウを作成するにはどうすればよいですか?" >

filter:dropShadow() を使用すると、リアルで形状に従ったドロップ シャドウを実現できます。非正方形の PNG 画像で、Web デザインの視覚的な魅力を高めます。

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