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

linea html hr color

Question

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

<hr size="10">

Pero escuché que esto está en deprecated como se menciona en MDN aquí . En CSS intenté usar height:1px pero no cambia el grosor. Quiero que la línea <hr> tenga 0.5px grosor de 0.5px .

Estoy usando Firefox 3.6.11 en Ubuntu

Answer 1

Representación sub-píxel en los navegadores

La representación de subpíxeles es complicada. No se puede esperar que un monitor muestre una línea delgada de menos de un píxel. Pero es posible proporcionar dimensiones de sub-píxel. Dependiendo del navegador los renderizan de forma diferente. Revisa esta publicación del blog de John Resig al respecto.

Básicamente, si su monitor es un LCD y está dibujando líneas verticales, puede dibujar fácilmente una línea de 1/3 píxeles. Si el fondo es blanco, dale a tu línea el color de #f0f . Para el ojo esta línea tendrá 1/3 de pixel de ancho. Aunque será de algún color, si aumente el monitor, verá que solo un segmento de todo el píxel (que consiste en RGB) estará oscuro. Esta es prácticamente una técnica que se usa para hacer sugerencias de tipo fino, es decir, ClearType .

Pero las líneas horizontales solo pueden tener un píxel completo de altura. Esa es la limitación tecnológica de los monitores LCD. Los TRC eran aún más complicados con sus fósforos triangulares (a menos que fueran del tipo de rejilla de apertura, por ejemplo, Sony Trinitron), pero esa es una historia diferente.

Básicamente, proporcionar una dimensión de subpíxel y esperar que se muestre de esa manera es lo mismo que esperar que una variable entera almacene un número de 1.2034759349. Si entiende que esto es imposible, debe comprender que los monitores no pueden representar dimensiones de subpíxeles.

Estilo seguro de navegador cruzado

Pero la forma en que se combinan las reglas horizontales se hace usualmente usando colores. Por lo tanto, si su fondo es, por ejemplo, blanco ( #fff ), siempre puede hacer que su HR muy ligero. 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 solo un elemento particular. Hace que la mantenibilidad sea mucho mejor.

Answer 2

Agregué opacidad a la línea, por lo que parece más delgada:

<hr style="opacity: 0.25">

Answer 3

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

Hasta HTML5, FUE 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 atributos utilizados antes, como tamaño, ancho, alinear ) ...

Ahora, este es bastante complicado, pero funciona bien si se necesita la hora más sencilla de 1px:

Variación 1, BLACK hr: (la mejor solución para el negro)

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

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

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

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

Salida: Ópera - gris oscuro / FF - gris / Safari - gris claro

Variación 3, COLOR como se desee:

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

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

Answer 4

Por consistencia, elimine cualquier borde y use la altura para el grosor de <hr> . Agregar un color de fondo dará un estilo a su <hr> con la altura y el color especificados.

En su 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 lo tengas:

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

Una explicación más larga here

Answer 5

Recomendaría configurar el HR como si fuera 0px alto y usar su borde para ser visible en su lugar. Me he dado cuenta de que cuando se acerca y se aleja (ctrl + rueda del mouse) el grosor de la HR cambia, mientras que cuando se establece el borde siempre se mantiene igual:

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

Answer 6

Sugiero usar construcción como

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>

Answer 7

el atributo de altura ha quedado obsoleto en html 5. Lo que haría sería crear un borde alrededor de la hora y aumentar el grosor del borde como tal: hr style = "border: solid 2px black;"