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

【问题标题】：CSS Border on PNG image with transparent parts带有透明部分的PNG图像上的CSS边框
【发布时间】：2012-09-23 07:34:32
【问题描述】：

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

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

【问题讨论】：

即使图像是透明的 png，边框也会应用于元素，它本质上仍然是图像周围的正方形。可悲的是没有解决方案，为什么不能在实际图像上做边框？
你能说明你想要图像+边框的样子吗？
嗨乔恩，我添加了一个示例的图像，我希望它如何显示。
你可以试着和拉斐尔一起玩。 raphaeljs.com。或者将您的图像加载到 HTML5 画布中并使用边缘检测脚本（eek！）做边框。
那么你就在那里 - 你有一个漂亮的绿色边框！ ;-)。不过说真的 - 如果不自己在图像上绘制边框，您将无法实现这一目标。

【解决方案1】：

遇到需要自己做这件事 - 想出了这个 hack。我的原件后面的一系列重叠图像彼此略微不同步。上下文 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);

【讨论】：

【解决方案2】：

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

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

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

第一个 sn-p (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;
}

&lt;img src="http://i.imgur.com/GZoXRjS.png" width="250"&gt;

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

考虑到这一点，这里是完美的边框 sn-p (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;
}

&lt;img src="http://i.imgur.com/GZoXRjS.png" width="250"&gt;

这应该很好地覆盖了边界，但我们仍然可以从中获得更多乐趣，看看这个很棒的lightness effect sn-p (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;
}

&lt;img src="http://i.imgur.com/GZoXRjS.png" width="250"&gt;

希望这可以帮助任何想为半透明图像设置环绕边框的人！

【讨论】：

让我们希望这个解决方案能够成为规范，并且 IE 开始支持它！ +1
好主意，只是一个提示，如果你想要更大的描边，使用 4 个阴影效果会更好一些： filter: drop-shadow(2px 0px 0 black) drop-shadow(0px 2px 0 黑色) 阴影(-2px -0px 0 黑色) 阴影(-0px -2px 0 黑色);
@AdamCoulombe filter: drop-shadow(2px 0px 0 black) drop-shadow(0px 2px 0 black) drop-shadow(-2px -0px 0 black) drop-shadow(-0px -2px 0 black);。请下次使用代码:)
你是一个大英雄

【解决方案3】：

我稍微扩展了最适合我使用的最佳答案。

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

如果有人仍然需要它。

【讨论】：

是的，这正是我需要的。谢谢分享。
请记住，单向大于 2 个像素，因为您是在对角线。执行 (1, 0), (-1, 0), (0, 1), (0, -1) 会产生 1 像素的笔划。

【解决方案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）。

【讨论】：

【解决方案5】：

我通过一些调整实现了这项技术，结果如下：

您可以看到圆形图像看起来不错，其他形状的图标也是如此。

这是我的 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。

【讨论】：