html - ホバー時の CSS ドロップ シャドウが、Chrome を使用してマウス アウト時に完全に削除されない

Question

私のサイトのいくつかの透明なpngのホバーにドロップシャドウ効果がありますが、マウスが画像を離れたときに影が完全に削除されません(また、SafariとFirefoxでもまったく機能しませんが、それは別の質問になります)

これは元の画像です：

これは、ドロップ シャドウのイメージです。

そして、これはマウスが去った後の画像です:

コードは次のとおりです。

CSS:

<style>
    img:hover {
       -webkit-filter: drop-shadow(5px 5px 5px #222); 
       filter: drop-shadow(5px 5px 5px #222);  
    }
</style>

HTML:

<img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png" width="150"/>

お手伝いありがとう！

Answer 1

これがレイアウトを台無しにするかどうかはわかりませんが、パディングを追加してみてください:

<img src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Triple-Spiral-4turns_green_transparent.png" width="150" style="padding:10px"/>