Css 如何向大小未知的图像添加偏移边框？

我试图设计这种效果：

如何使用css实现这一点？图像大小未知，我希望绿色框与图像大小相同，但偏移

除了使用javascript调整绿框大小外，我无法找到任何解决方案，但我认为一定有css解决方案

---

谢谢

如果将图像放置在纯色背景上，则可以使用框阴影来实现这一点。将第一个阴影设置为与背景相同的颜色，将其他阴影设置为所需边框的颜色

img { box-shadow: 29px 29px 0 white,  31px 31px 0 green, 31px 27px 0 green, 27px 31px 0 green; }

---

这里是fiddle

如果将图像放置在纯色背景上，您可以使用方框阴影来实现这一点。将第一个阴影设置为与背景相同的颜色，将其他阴影设置为所需边框的颜色

img { box-shadow: 29px 29px 0 white,  31px 31px 0 green, 31px 27px 0 green, 27px 31px 0 green; }

---

这里是fiddle

您可以使用pseudo类来执行此操作：

.imgContainer{
位置：相对位置；
显示：内联块；
}
.imgContainer:之前{
内容：''；
边框：1px纯绿色；
位置：绝对位置；
宽度：100%；
身高：100%；
排名前10%；
左：10%；
z指数：-1；
}

---

您可以使用伪类来执行此操作：

.imgContainer{
位置：相对位置；
显示：内联块；
}
.imgContainer:之前{
内容：''；
边框：1px纯绿色；
位置：绝对位置；
宽度：100%；
身高：100%；
排名前10%；
左：10%；
z指数：-1；
}

---

如果需要透明背景，可以创建一个使用透明背景的图像类

---

如果需要透明背景，可以创建一个使用透明背景的图像类

---

谢谢似乎将outder div设置为display:inline块是我丢失的部分。谢谢谢谢似乎将outder div设置为display:inline块是我丢失的部分。谢谢