Obramowanie i tło są wyświetlane w różnych kolorach, nawet jeśli wartości kolorów są takie same w CSS

Question

Czy można ustawić kolor obramowania na taki sam, jak kolor tła? W moim przykładzie powinien on mieć ten sam kolor, ale kolor obramowania jest zawsze nieco ciemniejszy niż kolor tła.

.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

Należy określić background-clip: padding-box; (lub content-box), ponieważ domyślnie ta właściwość jest ustawiona na border-box zatem tło obejmuje również obszar pod granicami.

Efekt, który uzyskujesz, wynika z nakładania się przezroczystości (z pełnym kolorem, którego nie zauważysz), dlatego właśnie widzisz granicę nieco ciemniejszą niż kolor tła

.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

Oprócz fcalderan za odpowiedź, można również dokonać border-color przejrzysty tak div za kolor tła po prostu przychodzi poprzez:

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

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

Answer 3

nie trzeba pisać żadnych dodatkowych linii

.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

Albo może to być inna decyzja - po prostu naśladować swoją granicę przez box-shadow

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