即使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>

Answer 2

除了fcalderan的答案,你还可以使border-color透明,所以div的背景颜色只是通过:

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

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

Answer 3

或者它可以是另一个决定 - 只需用盒子阴影模仿你的边框

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