截至目前（* 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">

正如你所看到的，一些图像（如this awesome baymax render）需要更多的调整，你可以看到右边界比左边界小一点。
考虑到这一点，下面是完美的边框代码片段（fiddle），其中只对值进行了非常小的调整。
一个二个一个一个
这应该可以很好地覆盖边界，但是我们仍然可以从中获得更多的乐趣，看看这个令人敬畏的亮度效果片段（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">

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

我把上面的答案扩展了一点，这对我的使用更好。

-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);

如果有人还需要的话。

三年的问题仍然有效。因为我（最初）想要一个更厚的笔触，我最终使用了8个阴影（指南针的每个点一个）让它看起来就像这样。
奇怪的是，使用8个阴影，x和y偏移量为1 px，会产生一个看起来大约5 px宽的轮廓，但在颜色中引入透明度似乎有助于将其拨回到稍微柔和但相当吸引人的结果：

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）。

我对这项技术进行了一些调整，结果如下：

正如你所看到的圆形图像看起来很好，所以是其他形状的图标。
这是我的css，我为四边添加了四条规则，每条5像素。

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

前缀将自动添加，因为我使用的是scss。

偶然发现需要自己做这个-想出了这个黑客。一系列重叠的图像背后我原来的是稍微不同步彼此。上下文ctx 3是一个副本的原始图像，这将复制一个白色的剪影背后的原始几次。

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);

这个博客解释了如何创建一个平滑的轮廓。你可以更新calculateStrokeTextCSS函数来使用这个字符串。

css += "drop-shadow(calc($stroke-width-img * " +
  cos +
  ") calc($stroke-width-img * " +
  sin +
  ") 0 $stroke-color-img)"

https://codepen.io/inegoita/pen/ZEQVPLx?editors=1010