Граница и фон отображаются как разные цвета, даже если значения цвета одинаковы в CSS

Можно ли сделать цвет границы таким же, как цвет фона? В моем примере он должен иметь тот же цвет, но цвет границы всегда немного темнее, чем цвет фона.

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

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

Ответ 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>

Ответ 2

В дополнение к ответу fcalderan вы также можете сделать прозрачный border-color таким образом, чтобы цвет фона div просто проходил:

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

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

Ответ 3

Или это может быть другое решение - просто эмулируйте свою границу с помощью теневой тени

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

Ответ 4

вам не нужно писать дополнительную строку

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

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