Css 边框框透明边框

我正在尝试使用边框框来创建一种效果，即在3列图像周围有一个50%透明度的黑色边框。我已经读到，为了使边界向内移动以使用填充，我无法使其工作

以下是我的CSS代码：

div.column-image {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1em solid rgba(0, 0, 0, 0.5);
padding: 5px;
float: left;
}

这就是结果

我想要的是让边界向内，这样可以让图片透过边界看到

下面是一个例子：

---

我试图按照本教程中的示例进行操作，但失败了

请帮忙我不知道该怎么办~

编辑：这是像这样的

的直播版

我通过放置在包装

div

元素上的伪元素添加了边框

遗憾的是，您不能在

img

本身上使用psuedo元素，因为规范规定：

12.1：伪元素之前和之后

注意。本规范没有完全定义：before和：after与替换元素（如HTML中的IMG）的交互。这将在未来的规范中进行更详细的定义

HTML

<div id="imgwrap">
    <img/>
</div>

---

您是否愿意通过背景图像和框阴影解决方案来实现这一点？最好的做法是将其最小化，并减少不必要的标记（在CSS和HTML中）。您只需要一个包含边框和图像的div

.transparent-bordered-image {
    background-image: url(http://your-url-here);
    background-size: cover;
    box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
   -webkit-box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
}

这是一个例子：

---

我想你应该把这个CSS放在div上，然后把图像放在div里。你不想把这个应用到图像本身。我支持这个动作。。。查找CSS和HTML方面的“掩蔽”，你应该能够用它实现你想要的效果。

.transparent-bordered-image {
    background-image: url(http://your-url-here);
    background-size: cover;
    box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
   -webkit-box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
}