如何使用 CSS 在图像周围添加非矩形边框？答案

【问题标题】：How do I use CSS to add a non-rectangular border around an image?如何使用 CSS 在图像周围添加非矩形边框？
【发布时间】：2015-02-01 04:01:02
【问题描述】：

我有三张图片，它们的形状不是正方形或长方形。它们就像任何人的脸。

所以，基本上，我的图片大小为 196x196 或类似大小，但完整的正方形或矩形，脸部在中间，其余部分为透明背景。

~~现在，我也想移除透明背景，只保留面孔。~~

不知道这是否可能，请注意，这不是编程问题。

编辑（来自 cmets）：如何使用 CSS 在图像的形状周围放置一个边框，而不是在边界周围放置一个矩形。

【问题讨论】：

-1 用于非编程问题。所有图像（除了一些矢量结构）都使用四边形边界框。我从来没有听说过实现这一点的机制。也许上下文会有所帮助，你想做什么？
好的，我知道这会发生，但我们不要在意它，感谢您的评论......我正在做的是......我正在将图像切成三份，以便这些图像可以通过 HTML 可点击。我设法使用 CSS 将它们设置为原始照片中的位置，但是当我尝试添加边框颜色时，它没有完成工作，只是将形状加边框，即正方形、矩形等，所以我想删除透明度和制作它们，使边框围绕图像而不是形状......我希望你理解
CSS 边框只会绕过矩形。浏览器支持的任何光栅格式都不能包含非矩形图像。
我编辑了问题以合并这些 cmets。我会说这是一个编程问题，但 CSS 中确实没有解决方案。
CSS Border on PNG image with transparent parts 的可能重复项

【解决方案1】：

回答您关于面部边框的问题。

据我所知，使用 CSS 无法做到这一点——您可以使用 ImageMagick 或（免责声明，我为 Atalasoft 工作）DotImage（一个 .NET 成像 SDK）编写一个程序来做到这一点。无论哪种方式，您都需要复制文件，调整大小、颜色，然后将原始文件叠加到文件上。

【讨论】：