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

CSS を使用して不規則な形の PNG 画像にドロップ シャドウを適用する

-o- を使用して PNG 画像にドロップ シャドウを適用する標準的な方法box-shadow、-icab-box-shadow、-khtml-box-shadow、-moz-box-shadow、 -webkit-box-shadow または box-shadow プロパティは、画像を正方形として扱います。これにより、影が画像の実際の形状と一致しない可能性があります。

非正方形の PNG 画像の輪郭に正確に従うドロップ シャドウを適用するには、CSS フィルタ 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="image.png">

filter:dropShadow() プロパティを使用すると、不規則な形の PNG 画像に正確なドロップ シャドウを実現し、視覚的な魅力を高め、追加することができます。デザインに深みを与えます。

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