我试图在我拥有的 PNG 图像上添加边框（包括示例）。问题是，当我当前添加边框时，它会将其添加到所有图像周围的框形上，而不是精确的矢量上（意味着它包括图像中的透明部分）。
是否有任何可能的方法来设置它不会考虑透明区域的边框配置。（即使不是在 CSS 中......也许是 HTML5/JS？）
问问题
52184 次
5 回答
81
截至目前（2015 年 1 月 31 日），有一种方法可以做到这一点，而无需使用画布，使用纯 CSS，并且只需 2 行代码。
诀窍是使用 cssfilter和-webkit-filter属性绘制两个没有模糊的阴影，一个用于正轴，一个用于负轴，它将环绕图像，这将提供（希望）所需的效果。
注意： IE 中根本不支持 css 过滤器（希望 Spartan 做得更好），这是一个兼容性表。
第一个片段（小提琴）将应用最简单的边框。
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">正如你所看到的，一些图像（比如这个很棒的baymax渲染）需要更多的调整，你可以看到右边框比左边框小一点。
考虑到这一点，这是一个完美的边框片段（小提琴），只有一个非常小的值调整。
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">这应该很好地覆盖边界，但我们仍然可以从中获得更多乐趣，看看这个令人敬畏的亮度效果片段（小提琴）。
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">希望这可以帮助任何想知道半透明图像环绕边框的可能性的人！
于 2015-01-31T20:00:40.883 回答
29
我扩展了最适合我使用的最佳答案。
-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);如果有人还需要它。
于 2016-07-25T18:51:59.403 回答
7
三年的问题仍然有效。因为我（最初）想要更粗的笔触，所以我最终使用了 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）。
于 2019-03-05T22:04:45.217 回答
0
遇到需要自己做这个 - 想出了这个黑客。我的原件后面的一系列重叠图像彼此略微不同步。上下文 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);
于 2014-02-18T05:20:02.517 回答
0
我通过一些调整实现了这项技术，结果如下：
如您所见，圆形图像看起来不错，其他形状的图标也是如此。
这是我的 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，所以前缀会自动添加。
于 2021-12-24T06:44:40.420 回答