Dibuja un borde con cuatro lados:
La solución 1 usa box-shadow, porque boder no admite la unidad de 0,5 píxeles, pero box-shadow admite la unidad de 0,5 píxeles, por lo que se puede realizar a través de la sombra interior.
box-shadow: 0px 0px 0px 0.5px rgba(153, 153, 153, 1);La opción 2 se realiza escalando la transformación, donde es necesario prestar atención a la necesidad de modificar el punto central de la escala.
Cuando el atributo transform-origin no está establecido, la rotación, el desplazamiento, el escalado y otras operaciones realizadas por la deformación CSS se transforman en la posición del centro del elemento mismo (origen de la transformación/punto central). El atributo transform-origin en CSS3 se usa para establecer la posición del punto base del elemento giratorio. Familiarizarse con el uso de transform-origin combinado con la animación CSS3 puede hacer que el elemento gire y se desplace a lo largo de un determinado punto base. Este artículo presenta la definición y el uso de transform-origin Y analice su principio tanto como sea posible, el artículo también presentará varios efectos de animación aplicados a esta propiedad.
transform-origin: x-axis y-axis z-axis;
valores predeterminados
transform-origin:50% 50% 0;
Usando la propiedad de zoom, establecemos un borde de 1 px y establecemos la longitud y el ancho al doble del tamaño del elemento secundario envuelto. Cuando se reduce en 0,5, solo se convierte en el ancho y la altura del elemento secundario, y el borde de 1 px es también reducido a la mitad. 0.5px
&::after{
position: absolute;
left: 0;
top: 0;
content: '';
width: 200%;
height:200%;
border: 1px solid rgba(153, 153, 153, 1);
transform-origin: 0 0;
transform: scale(0.5);
}
Darse cuenta de la frontera de un borde
position: absolute;
left: 0;
top: 0;
content: '';
width: 100%;
height: 0.5px;
background-color: rgba(153, 153, 153, 1) ;
bottom: 0;