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。