边框透明边框

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/

Answer 2

喜欢这个？ jsFiddle example

我通过放置在包裹div元素上的伪元素添加了边框。

可悲的是，你不能在img本身上使用psuedo元素，因为规范声明：

  

12.1：之前和之后：伪元素 (reference)

     

请注意。此规范未完全定义：替换元素（例如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; }