RGBA边框透明度与背景颜色不可见

Question

我正在尝试在容器边缘添加黑色边框，其边框的不透明度应为15％。添加border属性时，边框显示在容器内部，而不是边缘周围。我不知道为什么会发生这种情况。

CSS

.container {
    width: 945px;
    margin: 0 auto;
}

.content {
    margin: 15px auto 0;
}

.main {
    padding: 15px;
    background: #252525;
    border: 2px solid rgba(0,0,0,0.15);
    color: #fff;
}

HTML

<div class="content container">
    <div class="main">
               ...
    </div>
</div>

预期结果

实际结果

Answer 1

将border添加到.container。

另一种方法是将透明背景设置为.container并设置.main margin:2px。

Answer 2

另一种选择是使用background-clip属性：

.main {
   border: 5px rgba(0,0,0,.15);
   border-style: solid;
   background: #252525;
   /* The background will not go behind the border */
   background-clip: padding-box;

    color: #fff;
    height: 200px;
}

JsFiddle： http://jsfiddle.net/2KBPn/

Documentation