245 votos

Cómo cambio el grosor de mi etiqueta <hr>

Quiero cambiar el grosor de mi regla horizontal en el CSS. Sé que se puede hacer en HTML así -

<hr size="10">

Pero he oído que esto es desaprobado . En el CSS intenté usar height:1px pero no cambia el grosor. Quiero que el <hr> línea de ser 0.5px grueso.

Estoy usando Firefox 3.6.11 en Ubuntu

425voto

Grillz Puntos 4988

Para la consistencia, elimine cualquier borde y use la altura para la <hr> espesor. Añadir un color de fondo le dará estilo a tu <hr> con la altura y el color especificados.

En tu hoja de estilo:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

O en línea como usted lo tiene:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

Una explicación más larga aquí

49voto

Robert Koritnik Puntos 45499

Renderización de sub-píxeles en los navegadores

Renderización de sub-píxeles es difícil. No puedes esperar que un monitor muestre una línea delgada de menos de un píxel. Pero es posible proporcionar dimensiones de sub-píxeles. Dependiendo del navegador, las renderizan de forma diferente. Mira este John Resig blog rápido sobre ello.

Básicamente, si tu monitor es un LCD y estás dibujando líneas verticales, puedes dibujar fácilmente una línea de 1/3 de píxeles. Si tu fondo es blanco, dale a tu línea un color de #f0f . Para el ojo esta línea será de 1/3 de pixel de ancho. Aunque será de algún color, si ampliaras el monitor, verías que sólo un segmento de todo el píxel (que consiste en RGB) será oscuro. Esta es una técnica que se utiliza para la insinuación de tipo fino, es decir ClearType .

Pero las líneas horizontales sólo pueden tener un píxel de altura. 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 rejilla de apertura es decir, Sony Trinitron) pero esa es una historia diferente.

Básicamente, proporcionar una dimensión de subpíxel y esperar que se traduzca de esa manera es lo mismo que esperar que una variable entera almacene un número de 1,2034759349. Si entiendes que esto es imposible, debes entender que los monitores no son capaces de mostrar dimensiones de sub-píxeles.

Estilo de seguridad de los navegadores cruzados

Pero la forma en que la horizontalidad rige que ciego en se hacen normalmente con colores. Así que si tu fondo es por ejemplo blanco ( #fff ) siempre puedes hacer tu HR muy luz. Como #eee .

El estilo seguro de navegador cruzado para una regla horizontal muy ligera sería:

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

Y usa un archivo CSS en lugar de estilos en línea. Proporcionan una definición central para todo el sitio, no sólo un elemento en particular. Hace que la mantenibilidad sea mucho mejor.

12voto

Yaerius Puntos 131

Yo recomendaría establecer el HR mismo para ser 0px alto y utilizar su borde para ser visible en su lugar. Me he dado cuenta de que al acercar y alejar el zoom (ctrl + rueda del ratón) el grosor de HR cambia, mientras que cuando se establece el borde siempre se mantiene igual:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

8voto

Muscaria Puntos 11

Estaba buscando la forma más corta de dibujar una línea de 1px, ya que toda la carga de CSS separada no es la solución más rápida o corta.

Hasta HTML5, el WAS una forma más corta para 1px hr: <hr noshade> pero.. El atributo noshade de <hr> no es compatible con HTML5. Utilice CSS en su lugar. (ni otros attibutos utilizados antes, como tamaño, anchura, alineación )...


Ahora bien, este es bastante complicado, pero funciona bien si la mayoría de 1px hr simple necesario:

Variación 1, hora NEGRA (la mejor solución para el negro)

<hr style="border-bottom: 0px">

Salida: FF, Opera - negro / Safari - gris oscuro


Variación 2, hr GRIS (¡la más corta!):

<hr style="border-top: 0px">

Salida: Opera - gris oscuro / FF - gris / Safari - gris claro


Variación 3, colorear al gusto:

<hr style="border: none; border-bottom: 1px solid red;">

Salida: Opera / FF / Safari : 1px rojo.

5voto

meddy Puntos 335

El atributo height ha quedado obsoleto en html 5. Lo que yo haría es crear un borde alrededor del hr y aumentar el grosor del borde así: hr style="border:solid 2px black;"

Iteramos.com

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.

Powered by:

X