为不规则形状的图像添加边框答案

【问题标题】：Add a border to an irregular shaped image为不规则形状的图像添加边框
【发布时间】：2017-12-19 02:42:18
【问题描述】：

我正在尝试开发一个公司的团队页面，该页面使用不规则形状的 png 图片，但需要在图片周围有一个红色边框。

成品需要如下所示：

我得到的图像是这样的：

有没有办法使用 css/js 给图像一个边框，使其保持在不规则形状所在的区域？

高低搜索了，但找不到可行的解决方案。

【问题讨论】：

【解决方案1】：

您需要使用图像编辑器将白色未使用的空间删除到 alpha 通道并将其保存为 .png 文件，然后您可以使用 drop阴影以应用所需的效果。以下只是演示：

img {
  width: 70%;
  filter: drop-shadow(4px 0px 0 red);
}

&lt;img src="https://s7.postimg.org/65lydsb57/a_Ql6e.png"&gt;

【讨论】：