En la siguiente demostración, haga clic y mantenga presionado el botón del mouse sobre la etiqueta de anclaje, luego arrastre el cursor hacia afuera, mientras mantiene presionado el botón del mouse y finalmente suelte el clic. Verá un contorno de puntos rojos alrededor de la etiqueta de anclaje. Ahora, si presiona la tecla Mayús, el contorno se desplazará unos pocos píxeles.
a:focus { outline: 1px dotted red; } <a href="#">Click+hold, then release, then press shift key</a> El comportamiento no ocurre al presionar las teclas ctrl o fn , etc., pero ocurre con la mayoría de las teclas. Este comportamiento parece ser compatible con varios navegadores, lo que me lleva a reflexionar:
De forma predeterminada, hay una animación configurada para esto si el desplazamiento de contorno no está definido. Puede ver la animación establecida en el ancho del contorno aquí en el tipo de animación en Definición formal. Se establece una función en el tipo de animación que ayuda en la animación. Cuando están animados, los valores del tipo de datos se interpolan como números reales de punto flotante. La interpolación ocurre sobre el valor calculado. La velocidad de la interpolación está determinada por la función de temporización asociada con la animación que provoca el aumento del desplazamiento del contorno de 0px a 1px.
Referencias: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function https://developer.mozilla.org/en-US/docs/Web/CSS/length#interpolation https: //www.w3.org/wiki/CSS/Properties/outline-width .
Puede verificarlos y verificarlos minuciosamente en estos enlaces.
Al hacer clic en un elemento y luego presionar Shift , como dijiste, o enalgunas otras situaciones determinadas a través de la heurística , estás activando los estados :focus y :focus-visible . El navegador aplicará sus estilos predeterminados para estos estados.
El resultado que está informando se puede reproducir en Chrome debido a su hoja de estilo de agente de usuario predeterminada , pero no en Firefox, por ejemplo. Puede probar esto por su cuenta abriendo DevTools y forzando los estados del elemento a .
El siguiente ejemplo reproduce los estilos predeterminados de Blink (motor de renderizado de Chrome) para que pueda verse en otros navegadores:
a:focus { outline: 1px dotted red; } a:any-link:focus-visible { outline-offset: 1px; } /* for non-Blink WebKit browsers */ a:-webkit-any-link:focus-visible { outline-offset: 1px; } <a href="#">Example link</a> <!-- To see the result described in the question for sure, please force :focus and :focus-visible states using DevTools -->