边框盒子透明边框

Question

我想使用border-box来创建一个黑色50%透明度边框，围绕3列图像。我读过了要使边框向内移动需要使用padding的方法，但是我无法让它工作。

这是我的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，但是失败了。

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

编辑：这里是网站的在线版本。

- user2959484

---

我认为你想把这个CSS放在div上，然后把图片放在div里面。你不想把它应用到图片本身。 - joshstrike

我赞同这个提议...在CSS和HTML中查找“掩码”，你应该能够通过它实现你想要的效果。 - SnareChops

Answer 1

您是否愿意通过 background-image 和 box-shadow 解决方案来实现此功能？这是更好的实践方法，可以最大程度地减少不必要的标记（在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/

- Michelle

Answer 2

像这样吗？jsFiddle的例子

我通过添加一个伪元素放在一个包装的 div 元素上来添加边框。

不幸的是，你不能在 img 上使用伪元素，因为规范说明：

12.1 :before 和 :after 伪元素(参考)

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

HTML

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

CSS

#imgwrap {
    position:relative;
    display:inline-block;
}
#imgwrap:after {
    content:"\A";
    border:20px solid rgba(10, 0, 255, 0.5);
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    box-sizing: border-box;
    -wekbit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
img { vertical-align:top; }

- Josh Crozier