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

あなたは、デフォルトでは、このプロパティは、このようborder-boxに設定されているため、背景も国境の下の領域をカバーしていbackground-clip: padding-box;（またはcontent-box）を指定する必要があります。

あなたが得ている効果は実際に透明度が重なり合っていることです（問題が気付かれない完全な色で）。そのため、ボーダーが背景色より少し暗く見える理由ですfcalderanの答えに加えて

.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

のdivの背景色は、単純に伝わってくるので、あなたもborder-colorを透明にすることができます：

.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); 
 
    border:10px solid rgba(0, 0, 0, .0); 
 
}

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

Answer 4

を記述する必要はありませんまたは別の決定することができます - ちょうどボックスシャドウであなたの国境をエミュレート

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