html - 即使 CSS 中的颜色值相同，边框和背景也会显示为不同的颜色

Question

是否可以让边框的颜色和背景颜色一样？在我的示例中，它应该具有相同的颜色，但边框颜色总是比背景颜色深一点。

.box {
    min-width: 50px;
    background: rgba(0, 0, 0, .2);
    border: 10px solid rgba(0, 0, 0, .2);
}

<div class="box">foo</div>

Answer 1

您应该指定 background-clip: padding-box;(或 content-box)，因为默认情况下，此属性设置为 border-box 因此背景也覆盖了边框下的区域。

您获得的效果实际上是由于重叠的透明度(全纯色您不会注意到这个问题)，所以这就是您看到边框比背景颜色暗一点的原因

.box {
    min-width: 50px;
    background: rgba(0, 0, 0, .2);
    background-clip:  padding-box;
    border: 10px solid rgba(0, 0, 0, .2);
}

<div class="box">foo</div>