Question

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

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

Example image

enter image description here

Answer 1

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

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

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

第一个代码段（fiddle）将应用最简单的边框。

＆＃13;

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

＆＃13;

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

＆＃13;

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

考虑到这一点，这里是完美的边框片段（fiddle），只有很小的价值调整。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

＆＃13;

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

＆＃13;

如果有人仍然需要它。

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个阴影（指南针的每个点一个阴影）来使它看起来像这样。

奇怪的是，使用x和y-偏移为1px的8个阴影产生的轮廓看起来大约为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）。

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

4 个答案: