1

以下の画像があり、外部スタイル シートにコードを記述したので、画像をロールオーバーするとドロップ シャドウが作成されますが、ボックス シャドウのみが作成されます。私が使用しているコードは次のとおりです。

ここに画像の説明を入力

.Pick:hover {
    -webkit-filter: drop-shadow(5px 5px 5px #222); 
    filter: drop-shadow(5px 5px 5px #222);
}

どこが間違っていますか？

4

2 に答える 2

0

あなたが投稿した画像は透明なpngではありません...もちろん、「ボックスモデル」の周りに影が表示されます。ここで、ホバー シャドウを持つ理想的な手段は、2 つの画像を持ち、ホバー時にそれらを切り替えることです。

実際のドロップ シャドウ (スニペットを実行して効果を確認します) ::

.pick { width: 225px; height: 225px; background-image: url('http://i.imgur.com/CeYiLOd.png');-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s; }
.pick:hover { background-image: url('http://i.stack.imgur.com/wQGBI.png')}
<div class="pick"></div>

于 2015-04-14T16:45:58.473 に答える