La CSS La propiedad de contorno es una propiedad confusa. Cuando se entera por primera vez, es difícil entender cómo es incluso remotamente diferente de la propiedad fronteriza. El W3C explica que tiene las siguientes diferencias:
- Los contornos no ocupan espacio.
- Los contornos pueden no ser rectangulares.
Los contornos no ocupan espacio
Esta afirmación, en sí misma, es confusa. ¿Cómo puede un objeto en su página web no ocupar espacio en la página web? Pero si piensa que su página web es como una cebolla, cada elemento de la página puede colocarse encima de otro elemento. La propiedad de contorno no ocupa espacio porque siempre se coloca encima de la caja del elemento.
Cuando se coloca un esquema alrededor de un elemento, no tiene ningún efecto sobre cómo se presenta ese elemento en la página. No cambia el tamaño o la posición del elemento. Si coloca un contorno en un elemento, ocupará la misma cantidad de espacio que si no tuviera un contorno de ese elemento. Esto no es cierto para un
frontera. Se agrega un borde en un elemento al ancho y alto exterior del elemento. Entonces, si tuvieras un imagen que tenía 50 píxeles de ancho, con un borde de 2 píxeles, ocuparía 54 píxeles (2 píxeles por cada borde lateral). Esa misma imagen con un contorno de 2 píxeles ocuparía solo 50 píxeles de ancho en su página, el contorno se mostraría sobre el borde exterior de la imagen.Los contornos pueden ser no rectangulares
Antes de que empieces a pensar "genial, ahora puedo dibujar círculos", piénsalo de nuevo. Esta declaración tiene un significado diferente de lo que piensas. Cuando coloca un borde en un elemento, el navegador interpreta el elemento como si fuera una caja rectangular gigante. Si el cuadro se divide en varias líneas, el navegador simplemente deja los bordes abiertos porque el cuadro no está cerrado. Es como si el navegador estuviera viendo el borde con una pantalla infinitamente ancha, lo suficientemente ancha como para que ese borde sea un rectángulo continuo.
Por el contrario, la propiedad de contorno tiene en cuenta los bordes. Si un elemento delineado abarca varias líneas, el contorno se cierra al final de la línea y se vuelve a abrir en la siguiente línea. Si es posible, el contorno también permanecerá completamente conectado, creando una forma no rectangular.
Usos de la propiedad de esquema
Uno de los mejores usos de la propiedad de esquema es resaltar los términos de búsqueda. Muchos sitios hacen esto con un color de fondo, pero también puede usar la propiedad de contorno y no preocuparse por agregar espacios adicionales en sus páginas.
La propiedad outline-color acepta el término "invertir" que hace que el color del contorno sea el inverso del fondo actual. Esto le permite resaltar elementos en páginas web dinámicas sin necesidad de saber qué se utilizan colores.
También puede utilizar la propiedad de contorno para eliminar la línea de puntos alrededor de los enlaces activos. Este artículo de Trucos CSS muestra como eliminar el contorno punteado.