CSS正在生成一个盒子阴影而不是阴影

Question

我有下面的图像，并在外部样式表中编写代码，这样当您翻转图像时，它会创建一个投影，但它只会创建一个框阴影。我正在使用的代码是：

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

我哪里错了？

Answer 1

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

我更新了你的png，它可以在这里工作：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 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>