CSS 正在生成框阴影而不是投影

Question

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

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

我哪里错了？

Answer 1

您发布的图像不是透明的 png...当然 'box-model' 周围会显示阴影。在这里，拥有悬停阴影的理想方法是拥有 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>

Answer 2

您的图片需要是透明的 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 中打开它，然后使用魔术棒工具 select 图像周围的白色并将其删除。

CSS 正在生成框阴影而不是投影

CSS is producing a box shadow not a drop shadow

css

google-chrome

drop-shadow