Html 带有透明部分的 PNG 图像上的 CSS 边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12690444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Border on PNG image with transparent parts
提问by nimi
Im trying to add a border on a PNG image I have (Example included). The thing is that when I add the border currently it adds it on a box shape around all the image and not on the exact vector (Meaning it includes the transparent parts in the image).
我试图在我拥有的 PNG 图像上添加边框（包括示例）。问题是，当我当前添加边框时，它会将它添加到所有图像周围的框形状上，而不是添加到精确矢量上（这意味着它包括图像中的透明部分）。
Is there any possible way to setup the configuration of the border that it won't consider the transparent area's. (Even if not in CSS... Maybe HTML5/JS?)
是否有任何可能的方法来设置它不会考虑透明区域的边界配置。（即使不在 CSS 中......也许是 HTML5/JS？）
回答by undefined
As of now (January 31st 2015) there is a way to do that without using canvas, with pure CSS, and with only 2 lines of code.
截至目前（2015 年 1 月 31 日），有一种方法可以在不使用画布、使用纯 CSS 且仅使用 2 行代码的情况下做到这一点。
The trick is using the css filterand -webkit-filterproperties to draw two drop shadows with no blur, one for the positive axis and one for the negative, which will wrap around the image, which will provide the (hopefully) desired effect.
诀窍是使用 cssfilter和-webkit-filter属性绘制两个没有模糊的阴影，一个用于正轴，一个用于负轴，它将环绕图像，这将提供（希望）所需的效果。
Note: css filters are not at all supported in IE (let's hope Spartan does better), here is a compatibility table.
注意：IE 完全不支持 css 过滤器（希望 Spartan 做得更好），这里是一个兼容性表。
This first snippet (fiddle) will apply the simplest border possible.
第一个片段（小提琴）将应用最简单的边框。
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">As you can see, some images (like this awesome baymax render) need a little more tweaking, you can see the right border is a little smaller than the left.
正如你所看到的，一些图像（比如这个很棒的 baymax 渲染）需要更多的调整，你可以看到右边框比左边框小一点。
With that in mind, here is the perfected border snippet(fiddle) with just a really tiny value tweak.
考虑到这一点，这里是完美的边框片段( 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">That should cover borders pretty well, but we can still have more fun with this, look at this awesome lightness effect snippet(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">Hope this helps anyone wondering about the possibility of a wrap-around border for semitransparent images!
希望这可以帮助任何想知道半透明图像环绕边框的可能性的人！
回答by COOLGAMETUBE
I extended the top answer a bit which is better for my use.
我扩展了最适合我使用的最佳答案。
-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);If someone still needs it.
如果有人还需要它。
回答by MSC
Three years on the question is still valid. As I (originally) wanted a thicker stroke, I ended up using 8 drop shadows (one for each point of the compass) to get it looking just so.
三年的问题仍然有效。因为我（最初）想要更粗的笔触，所以我最终使用了 8 个阴影（指南针的每个点一个）来让它看起来如此。
Strangely, using 8 shadows with an x- and y- offset of 1px yields an outline which looks about 5px wide, but introducing transparency into the colour seems to help dial this back to a slightly soft but quite attractive result:
奇怪的是，使用 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));
}
As you can see, CSS variables come in handy here (or Sass / Less).
如您所见，CSS 变量在这里（或 Sass/Less）派上用场。
回答by Darren
Came across needing to do this myself - came up with this hack. A series of overlaid images behind my original that were slightly out of step with each other. Context ctx3 is a copy of the original image and this would replicate a white silhouette behind the original several times.
遇到需要自己做这件事 - 想出了这个黑客。一系列重叠的图像在我的原件后面，彼此之间略有不一致。上下文 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);
