Quiero cambiar el grosor de mi regla horizontal (
) en CSS. Sé que se puede hacer en HTML de la siguiente manera -
Pero he escuchado que esto está obsoleto como se menciona en MDN aquí. En CSS he intentado usar height:1px pero no cambia el grosor. Quiero que la línea de
tenga un grosor de 0.5px.
Estoy usando Firefox 3.6.11 en Ubuntu
Para mantener la consistencia, elimina cualquier borde y utiliza la altura para el grosor del
`con la altura y color especificados.
hr {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}Versión en línea:
Explicación más detallada aquí.
El renderizado de subpíxeles es complicado. En realidad, no se puede esperar que un monitor represente una línea con un grosor menor a un píxel. Pero es posible proporcionar dimensiones de subpíxeles. Dependiendo del navegador, estos las representan de manera diferente. Lee este post del blog de John Resig al respecto.
Básicamente, si tu monitor es una LCD y estás dibujando líneas verticales, puedes fácilmente dibujar una línea de 1/3 de píxel. Si tu fondo es blanco, dale a tu línea el color #f0f. A simple vista, esta línea será de 1/3 de píxel de ancho. Aunque será de algún color, si ampliaras el monitor, verías que solo un segmento del píxel completo (compuesto por RGB) estará oscuro. Esta es básicamente la técnica que se utiliza para el ajuste fino de tipografías, es decir, ClearType.
Pero las líneas horizontales solo pueden tener una altura de un píxel completo. Esa es la limitación tecnológica de los monitores LCD. Los CRT eran aún más complicados con sus fósforos triangulares (a menos que fueran del tipo rejilla de apertura, es decir, Sony Trinitron), pero eso es otra historia.
Básicamente, proporcionar una dimensión de subpíxel y esperar que se represente de esa manera es lo mismo que esperar que una variable entera almacene un número como 1.2034759349. Si comprendes que esto es imposible, deberías entender que los monitores no pueden representar dimensiones de subpíxeles.
Pero la forma en que las reglas horizontales que se integran suelen hacerse es utilizando colores. Así que si tu fondo es, por ejemplo, blanco (#fff), siempre puedes hacer que tu HR sea muy claro. Como #eee.
El estilo seguro entre navegadores para una regla horizontal muy clara sería:
hr
{
background-color: #eee;
border: 0 none;
color: #eee;
height: 1px;
}Y utiliza un archivo CSS en lugar de estilos en línea. Proporcionan una definición central para todo el sitio, no solo para un elemento particular. Facilitan mucho más el mantenimiento.
Recomendaría configurar el HR en sí mismo para que tenga una altura de 0px y usar su borde para que sea visible en su lugar. He notado que al hacer zoom dentro y fuera (ctrl + rueda del mouse) el grosor del HR en sí mismo cambia, mientras que cuando se establece el borde siempre permanece igual:
hr {
height: 0px;
border: none;
border-top: 1px solid black;
}
Estaba buscando la forma más corta de dibujar una línea de 1px, ya que una carga completa de CSS separado no es la solución más rápida ni la más corta.
Hasta HTML5, había una forma más corta para la línea de 1px:
no es compatible con HTML5. En su lugar, utiliza CSS.** (ni otros atributos utilizados antes, como tamaño, ancho, alineación)...
Ahora, esta es bastante complicada, pero funciona bien si se necesita una línea hr de 1px simple:
Variación 1, línea NEGRA hr: (mejor solución para negro)
Resultado: FF, Opera - negro / Safari - gris oscuro
Variación 2, línea GRIS (¡la más corta!):
Resultado: Opera - gris oscuro / FF - gris / Safari - gris claro
Variación 3, COLOR según deseado:
Resultado: Opera / FF / Safari : 1px rojo.
Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.
