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

CSS で不規則な PNG 画像にドロップ シャドウを適用する

不規則な形の PNG 画像にドロップ シャドウ効果を作成するのは難しい場合があります標準の CSS box-shadow プロパティを使用します。これは、box-shadow が画像の周囲に正方形の影を追加し、画像内のオブジェクトの形状に従わないためです。

解決策: CSS フィルター プロパティを使用する

不規則な形の PNG 画像にドロップ シャドウを追加するには、dropShadow() 関数で CSS フィルター プロパティを使用できます。この関数は、x-offset、y-offset、blur-radius、color の 4 つのパラメータを受け取ります。

コード例

ドロップを適用する方法の例を次に示します。 dropShadow() 関数を使用したシャドウ:

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

この例では、5 ピクセルのドロップ シャドウを適用しています。 X 方向と Y 方向の両方のオフセット、5 ピクセルのぼかし半径、黒色 (#222)。

インライン スタイリング

ドロップ シャドウを適用することもできますインライン、style 属性を使用:

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png"
style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

dropShadow() 関数を使用すると、ドロップ シャドウを作成できますPNG 画像の形状を正確に追従し、より視覚的に魅力的でリアルな効果を提供します。

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