Box-shadow: bordes que no aumentan el tamaño del elemento. 23.6.12
Box-shadow: bordes que no aumentan el tamaño del elemento.
En el modelo de caja estándar, como es sabido, la anchura de los bordes suma para el cómputo del tamaño de la caja.
Y hay situaciones donde 1px de más o de menos basta para descuadrar toda la estructura.
Y otras en las que necesitas resaltar el elemento al :hover añadiendo un borde o aumentando el declarado. Con la lógica e incómoda sensación de movimiento que ello conlleva.
De momento, como no te puedes encomendar a la propiedad calc, sólo queda compensar el aumento del borde declarando un margen negativo del mismo valor. Tal que así:
Bordes con Box-shadow
Aprovechando las particularidades de la propiedad box-shadow podemos lograr el mismo efecto sin compensaciones del margen. Y como añadido, crear un borde multicolor. Porque recuerda que box-shadow no computa para el cálculo del tamaño de la caja.
Sólo es necesario declara todos los valores a cero, excepto el color y la distancia de propagación. Y recurrir a declarar múltiples valores en ella con color distinto para tener el arcoiris.Y eso es todo lo que necesitas. Sólo ser un poco imaginativo al usar Css.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso