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

Question

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

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

Answer 1

截至目前（2015年1月31日），有一种方法可以在不使用画布的情况下使用纯CSS，并且只使用2行代码。

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

注意：IE中根本不支持css过滤器（让我们希望Spartan做得更好），这里是一个compatibility table。

第一个片段（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">

正如你所看到的，一些图像（如this awesome baymax render）需要稍微调整一下，你可以看到右边框略小于左边。

考虑到这一点，这里是完美的边界片段（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">

希望这有助于任何人想知道半透明图像的环绕边界的可能性！

Answer 2

我扩展了最顶层的答案，这对我的使用更好。

-webkit-filter: drop-shadow(2px 2px 0 white)
                drop-shadow(-2px 2px 0 white)
                drop-shadow(2px -2px 0 white)
                drop-shadow(-2px -2px 0 white);

filter: drop-shadow(2px 2px 0 white)
        drop-shadow(-2px 2px 0 white)
        drop-shadow(2px -2px 0 white)
        drop-shadow(-2px -2px 0 white);

如果有人仍然需要它。

Answer 3

遇到需要自己做这件事 - 想出了这个黑客。我原版背后的一系列重叠图像与彼此略微不一致。上下文ctx3是原始图像的副本，这将在原始图像后面复制几次白色轮廓。

      ctx3.shadowColor = "rgba(255,255,255,1)";
      ctx3.globalCompositeOperation = 'source-over';
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 0;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 0;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = 0;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = 0;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);

Answer 4

三年的问题仍然有效。由于我（原本）想要更粗的笔划，我最终使用了8个阴影（指南针的每个点一个）以使其看起来如此。

奇怪的是，使用8个x和y偏移为1px的阴影会产生一个大约5px宽的轮廓，但是在颜色中引入透明度似乎有助于将其重新调整为略微柔和但非常吸引人的结果：

img {
    --stroke-pos: 1px;
    --stroke-neg: -1px;
    --stroke-color: rgba(0, 255, 0, 0.2);
    filter: drop-shadow(var(--stroke-pos) 0 0 var(--stroke-color)) 
      drop-shadow(var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(0 var(--stroke-pos) 0 var(--stroke-color))
      drop-shadow(0 var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(var(--stroke-pos) var(--stroke-pos) 0 var(--stroke-color)) 
      drop-shadow(var(--stroke-pos) var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(var(--stroke-neg) var(--stroke-pos) 0 var(--stroke-color))
      drop-shadow(var(--stroke-neg) var(--stroke-neg) 0 var(--stroke-color));   
}

如您所见，CSS变量在这里派上用场（或Sass / Less）。