css - CSS：是否可以在无背景的 PNG 图像的轮廓上放置阴影？

Question

现在，当我看到 CSS 的力量时，我想相信一切皆有可能——用块状元素制作不规则形状，即三角形，倒角 CSS 边框角——多么容易，但多么热情！所以我试着梦想一些事情，我相信通过一些 CSS 知识可以实现的事情。

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

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

如果我想将阴影放在元素上，而不是容器上（如盒形 HTML 元素），如图所示，仅对无背景图像的轮廓进行阴影 - 然后：

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

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

Answer 1

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

代码笔示例

<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 重新创建形状或使用图标字体。

由于您想要边框阴影的元素是图像，因此它们总是变成正方形或矩形。