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

Question

我正在尝试在我的容器边缘添加一个黑色边框，它的不透明度应该为 15%。添加边框属性时，边框出现在容器内部，而不是边缘。我不知道为什么会这样。

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/

文档