具有透明部分的 PNG 图像上的 CSS 边框

Question

我正在尝试在我拥有的 PNG 图像上添加边框（包括示例）。问题是，当我当前添加边框时，它会将它添加到所有图像周围的框形状上，而不是精确矢量上（这意味着它包括图像中的透明部分）。

是否有任何可能的方法来设置不考虑透明区域的边框配置。 （即使不是在 CSS 中……也许是 HTML5/JS？）

原文由 nimi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

截至目前（ _2015 年 1 月 31 日_），有一种方法可以在不使用画布、使用纯 CSS 且仅使用 2 行代码的情况下做到这一点。

诀窍是使用 css filter 和 -webkit-filter 属性绘制两个没有模糊的阴影，一个用于正轴，一个用于负轴，它将环绕图像，这将提供（ _希望_）预期的效果。

注意：IE 完全不支持 css 过滤器（希望 Spartan 做得更好），这是一个 兼容性表。

第一个片段 ( fiddle ) 将应用 最简单的边框。

 img {
  -webkit-filter: drop-shadow(1px 1px 0 black)
                  drop-shadow(-1px -1px 0 black);
  filter: drop-shadow(1px 1px 0 black)
          drop-shadow(-1px -1px 0 black);
}

body {
  background-color: lightcoral;
}

 <img src="http://i.imgur.com/GZoXRjS.png" width="250">

如您所见，一些图像（比如 这个很棒的 baymax 渲染）需要更多调整，您可以看到右边框比左边框小一点。

考虑到这一点，这里是 完美的边框片段( fiddle )，只做了一个非常小的值调整。

 img {
  -webkit-filter: drop-shadow(2px 1px 0 black)
                  drop-shadow(-1px -1px 0 black);
  filter: drop-shadow(2px 1px 0 black)
          drop-shadow(-1px -1px 0 black);
}

body {
  background-color: khaki;
}

 <img src="http://i.imgur.com/GZoXRjS.png" width="250">

这应该很好地覆盖了边界，但我们仍然可以从中获得更多乐趣，看看这个很棒的 亮度效果片段( fiddle )。

 img{
    -webkit-filter: drop-shadow(1px 1px 0 black)
                    drop-shadow(-1px -1px 0 white);
    filter:drop-shadow(1px 1px 0 black)
           drop-shadow(-1px -1px 0 white);
}

body{
    background-color:lightblue;
}

 <img src="http://i.imgur.com/GZoXRjS.png" width="250">

希望这可以帮助任何想知道半透明图像环绕边框可能性的人！

原文由 undefined 发布，翻译遵循 CC BY-SA 3.0 许可协议