css - 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 中打开它，并使用魔棒工具选择图像周围的白色并将其删除。

Answer 2

您发布的图像不是透明的 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>