css - ejemplos - Diferencia entre contorno y borde
css ejemplos (12)
¿Alguien sabe de alguna diferencia entre las propiedades ''borde'' y ''contorno'' en CSS? Si no hay diferencia, ¿por qué hay dos propiedades para la misma cosa?
tldr;
El W3C lo explica con las siguientes diferencias:
- Los contornos no ocupan espacio.
- Los contornos pueden ser no rectangulares.
http://webdesign.about.com/od/advancedcss/a/outline_style.htm
El esquema debe usarse para la accesibilidad
También se debe tener en cuenta que el objetivo principal del esquema es la accesibilidad. Configuración para delinear: ninguno debe evitarse.
Si debe eliminarlo, tal vez una mejor idea para proporcionar un estilo alternativo:
He visto bastantes consejos sobre cómo eliminar el indicador de enfoque mediante el uso de outline: none o outline: 0. No haga esto, a menos que reemplace el contorno con otra cosa que permita ver fácilmente qué elemento tiene el foco del teclado. Quitar el indicador visual del foco del teclado le dará a las personas que dependen de la navegación por teclado un tiempo realmente difícil para navegar y usar su sitio.
Fuente: "No eliminar el esquema de los controles de enlace y formulario", 365 Berea Street
Más recursos
Además de algunas otras respuestas ... aquí hay algunas diferencias más que puedo pensar:
1) esquinas redondeadas
border admite esquinas redondeadas con la propiedad border-radius . outline no.
div {
width: 150px;
height: 150px;
margin: 20px;
display: inline-block;
position: relative;
}
.border {
border-radius: 75px;
border: 2px solid green;
}
.outline {
outline: 2px solid red;
border-radius: 75px;
-moz-outline-radius: 75px;
outline-radius: 75px;
}
.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}
.outline:after {
content: "outline doesn''t support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}
<div class="border"></div>
<div class="outline"></div>
(NB: aunque firefox tiene la -moz-outline-radius que permite esquinas redondeadas en el contorno ... esta propiedad no está definida en ningún estándar CSS, y no es compatible con otros navegadores ( source ))
2) Diseñar solo un lado
el borde tiene propiedades para marcar cada lado con border-top: border-left: etc.
el esquema no puede hacer esto. No hay contorno superior: etc. Es todo o nada. (ver esta publicación SO )
3) compensación
el esquema admite desplazamiento con la propiedad outline-offset . el borde no.
.outline {
margin: 100px;
width: 150px;
height: 150px;
outline-offset: 20px;
outline: 2px solid red;
border: 2px solid green;
background: pink;
}
<div class="outline"></div>
Nota: Todos los navegadores principales admiten outline-offset excepto Internet Explorer
Además de otras respuestas, los contornos generalmente se usan para la depuración. Opera tiene algunos agradables estilos CSS de usuario que usan la propiedad de esquema para mostrarle dónde están todos los elementos en un documento.
Si está tratando de descubrir por qué un elemento no aparece donde esperaba o en el tamaño que esperaba, agregue algunos bosquejos y vea dónde están los elementos.
Como ya se mencionó, los contornos no ocupan espacio. Cuando agrega un borde, aumenta el ancho / alto total del elemento en el documento, pero eso no sucede con el contorno. Además, no puede establecer contornos en lados específicos como fronteras; es todo o nada.
Como un ejemplo práctico del uso de "esquema", el débil borde punteado que sigue el enfoque del sistema en una página web (por ejemplo, si recorre los enlaces) puede controlarse usando la propiedad de contorno (al menos, sé que puede hacerlo en Firefox , no probado otros navegadores).
Una técnica común de "reemplazo de imágenes" es usar, por ejemplo:
<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>
con lo siguiente en el CSS:
#logo
{
background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
display: block;
text-indent: -1000em;
}
El problema es que cuando el foco llega a la etiqueta, el contorno se dirige 1000em hacia la izquierda. El esquema puede permitirle desactivar el esquema de enfoque en dichos elementos.
Creo que la barra de herramientas de desarrollo de IE también está usando algo parecido a un esquema "debajo del capó" cuando se resaltan los elementos para su inspección en el modo "seleccionar". Eso muestra bien el hecho de que "esquema" no ocupa espacio.
Copiado de W3Schools:
Definición y uso
Un contorno es una línea que se dibuja alrededor de los elementos (fuera de los bordes) para hacer que el elemento "se destaque".
De: http://webdesign.about.com/od/advancedcss/a/outline_style.htm
La propiedad de esquema CSS es una propiedad confusa. Cuando se entera por primera vez, es difícil entender cómo es remotamente diferente de la propiedad en el borde. El W3C lo explica con las siguientes diferencias:
1. Las líneas no ocupan espacio.
2. Las líneas pueden ser no rectangulares.
Del sitio escolar W3
Las propiedades del borde de CSS le permiten especificar el estilo y el color del borde de un elemento.
Un contorno es una línea que se dibuja alrededor de los elementos (fuera de los bordes) para hacer que el elemento "se destaque".
La propiedad abreviada de esquema establece todas las propiedades de contorno en una declaración.
Las propiedades que se pueden establecer son (en orden): outline-color, outline-style, outline-width.
Si falta uno de los valores anteriores, por ejemplo, "outline: solid # ff0000;", se insertará el valor predeterminado para la propiedad faltante, si corresponde.
Consulte aquí para obtener más información: http://webdesign.about.com/od/advancedcss/a/outline_style.htm
He creado un pequeño fragmento de código css / html solo para ver la diferencia entre ambos.
outline es mejor para incluir posibles elementos infantiles desbordados, especialmente en un contenedor en línea .
border está mucho más adaptado para los elementos que forman bloques .
La propiedad de esquema en CSS dibuja una línea alrededor de la parte exterior de un elemento. Es similar a la frontera excepto que:
- Siempre va por todos lados, no se puede especificar particular
- lados No es parte del modelo de caja, por lo que no afectará
posición del elemento o elementos adyacentes
Fuente: https://css-tricks.com/almanac/properties/o/outline/
También vale la pena señalar que el contorno del W3C es el límite de IE, ya que IE no implementa el modelo de caja W3C.
En el modelo de caja w3c, el borde es exclusivo del ancho y alto del elemento. En IE es inclusivo.
Un uso práctico del esquema trata de la transparencia. Si tiene un elemento principal con un fondo pero desea que el borde de un elemento hijo sea transparente para que se muestre el fondo del elemento principal, debe usar "contorno" en lugar de "borde". Si bien un borde puede ser transparente, mostrará el fondo del niño, no el de los padres.
En otras palabras, esta configuración creó el siguiente efecto:
outline: 7px solid rgba(255, 255, 255, 0.2);
Una pequeña pregunta antigua, pero vale la pena mencionar un error de renderizado de Firefox (aún presente a partir de enero de 2013) donde el contorno se representará en el exterior de todos los elementos secundarios incluso si desbordan a su elemento primario (a través de márgenes negativos, sombras , etc.)
Puedes arreglar esto con:
.container {
position: relative;
}
.container:before {
content: '''';
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: 1px solid #ff0000;
}
Súper desafortunado que todavía no está arreglado. Prefiero esquemas en muchos casos, ya que no se suman a las dimensiones de un elemento, lo que evita tener que considerar siempre el ancho de los bordes al configurar las dimensiones de un elemento.
Después de todo, ¿qué es más simple?
.container {
width: 960px;
height: 300px;
outline: 3px solid black;
}
O:
.container {
width: 954px;
height: 294px;
border: 3px solid black;
}