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

CSS で非正方形の PNG 画像にドロップ シャドウを作成する

不規則な形状の PNG 画像にドロップ シャドウを適用すると、従来の box-shadow プロパティを使用してチャレンジします。画像の形状に準拠した適切なドロップ シャドウを実現するには、filter:dropShadow() プロパティを利用できます。

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="CSS で不規則な形の PNG 画像のドロップ シャドウを作成するにはどうすればよいですか?" >

dropShadow() プロパティにはいくつかの値が必要ですパラメータ:

• x と y: 画像からの影の距離 (ピクセル単位)
• ぼかし (オプション): ぼかし度ピクセル単位の影
• color: の色shadow

フィルター プロパティを Drop-shadow() に設定すると、ブラウザーは画像の周囲にその形状に従う影を生成し、目的の効果を提供します。

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