css - Border-Box 透明边框

Question

我正在尝试使用 border-box 来创建在 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;
}

这是结果

我想要的是边框向内，这样图片就可以透过边框看到。

这是一个例子:

---

我已尝试遵循本教程中的示例:CSS Tricks: Transparent Borders with background-clip , 并失败了。

请帮帮我，我不知道该怎么做~

编辑:这是 site 的实时版本

Answer 1

您是否愿意通过背景图像和框阴影解决方案来实现这一点？更好的做法是保持最小化并减少不必要的标记(在您的 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);
}

这是一个例子: http://jsfiddle.net/fBY9z/1/