如何为图片实现三层边框？需在现有CSS基础上添加内层黑边

要给图片添加内层黑色边框（即在绿色边框与图片内容之间的黑色边），你可以调整CSS思路，利用图片作为替换元素的特性来实现，无需额外容器。这里有两种实用方案：

方案1：padding + background 模拟内层黑边（推荐） #

这种方法直观易懂，通过图片的padding区域背景色来实现内层黑边，外层保留你需要的绿色边框：

img {
  padding: 1px; /* 该值对应内层黑边的宽度 */
  background-color: #000; /* 内层黑边的颜色 */
  border: 2px solid #00ff60; /* 外层绿色边框 */
}

原理：图片属于替换元素，padding会在图片内容与border之间预留空间，我们给这个空间设置黑色背景，就相当于在内层添加了一圈黑边，外层依然保持绿色边框的样式。

方案2：多重 box-shadow 实现 #

如果你更偏好使用阴影属性，也可以通过双层阴影来达成效果（注意：阴影不会占据布局空间，需根据你的布局需求选择）：

img {
  box-shadow: 
    inset 0 0 0 1px #000, /* 内层黑色 inset 阴影，模拟黑边 */
    0 0 0 2px #00ff60; /* 外层绿色阴影，模拟绿边框 */
}

说明：对于替换元素，inset阴影会显示在图片内容与边框区域之间，刚好符合内层黑边的需求。

补充：原代码中使用的outline默认是在border外侧绘制的，即便设置负的outline-offset让它向内，也容易出现与图片内容重叠的问题，因此不推荐用这种方式实现内层黑边。

内容的提问来源于stack exchange，提问作者user1022585