CSS：是否可以在无背景PNG图像的轮廓上添加阴影？

Question

现在我想要相信一切皆有可能，当我看到CSS的强大功能时 - 使用块元素制作不规则形状，即triangles，chamfered CSS Border Corners - 如何容易但多么热情！所以我试着去做一些事情，我认为可以通过CSS的一些知识来实现​​。

div.image{
    width: 18px;
    height: 18px;
    background: url(images/image-sprite.png) -70px 0;
    display: inline-block;
   }

假设我放置了一个宽度和高度为18px的“图像精灵”（）。但我调用的图像不是18px x 18px的盒形图像，假设图像是圆形或一些不规则形状。当我将box-shadow放入div时，它突出显示为一个框，当我放置text-shadow时，它不起作用，因为div / anchor元素中不包含任何文本。

如果我想将阴影放在元素上，而不是放在容器上（如盒状HTML元素），如图所示，阴影到无背景图像的轮廓 - 那么：

• 如何使用CSS完成？或者，
• 真的有可能吗？

注意：我知道，当我有无背景的图像和Photoshop时，我可以在几乎任何元素中添加必要的阴影。但我问了一个问题，如果这样的东西可以用原始CSS实现，那么对我们来说这将是一项了不起的成就。

Answer 1

新的CSS过滤器允许您这样做，但浏览器支持不是很深。

Codepen Example

<div class="image">
  <img src="http://www.equissage.co.uk/wp/wp-content/uploads/2010/08/equissage-red-horse.png" alt="" />
</div>

.image img {
  width:400px;
  -webkit-filter: drop-shadow(4px 4px grey);

}

Answer 2

执行所要求的唯一方法是使用css或使用图标字体重新创建形状。

因为想要边框阴影的元素是图像，所以它们总是变成正方形或矩形。