soy Kseso y esto EsCSS

Box-shadow: bordes que no aumentan el tamaño del elemento.

Box-shadow: bordes que no aumentan el tamaño del elemento.

·Por Kseso ✎ 0

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í:

.ejemplo1 { float:left; width: 50%; border: 0 none; }
.ejemplo1:hover { border: 10px solid #6988A5; margin: -10px; }

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.

:hover { box-shadow: 0 0 0 10px #CCCC00, 0 0 0 20px #41B7D8, 0 0 0 30px #6988A5; }

Y eso es todo lo que necesitas. Sólo ser un poco imaginativo al usar Css.

avatar del Editor del blog

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 Don Kseso Kseso