CSS 生成的是框阴影而不是投影

Question

我有下面的图片，并在外部样式表中编写了代码，这样当您将鼠标悬停在图片上时，它会创建一个投影，但它只会创建一个框阴影。我使用的代码是:

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

我哪里错了？

Answer 1

您的图像需要是透明的 PNG。如果您的图片不透明，则图片周围会显示阴影。

我更新了你的 png，它在这里工作:

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

<img class="pick" src="http://i.imgur.com/CeYiLOd.png">

为了完成这个，我在 Photoshop 中打开它，并使用魔术棒工具选择图像周围的白色并将其删除。