即使 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-shadow 模拟您的边框

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

Answer 4

你不需要写任何额外的行

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

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