html - poner - tabla de colores

El borde y el fondo aparecen como colores diferentes incluso cuando los valores de color son iguales en CSS

Question

¿Es posible hacer que el color del borde sea igual al color de fondo? En mi ejemplo, debería tener el mismo color, pero el color del borde siempre es un poco más oscuro que el color de fondo.

.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

Además de la respuesta de fcalderan, también puede hacer que el border-color del border-color transparente para que el color de fondo del div simplemente aparezca:

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

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

Answer 2

Debe especificar background-clip: padding-box; (o content-box ) porque, de forma predeterminada, esta propiedad está establecida en border-box lo que el fondo también cubre el área debajo de los bordes.

El efecto que está obteniendo en realidad se debe a una superposición de transparencias (con un color completamente sólido que no notaría el problema), por lo que esa es la razón por la que ve el borde un poco más oscuro que el color de fondo

.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 3

O puede ser otra decisión: simplemente emule su borde con la sombra de la caja

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

Answer 4

no necesitas escribir ninguna línea extra

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

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