Como posso alterar a espessura da minha tag <hr>


312

Quero alterar a espessura da minha regra horizontal ( <hr>) em CSS. Eu sei que isso pode ser feito em HTML assim -

<hr size="10">

Mas ouvi dizer que isso foi preterido, conforme mencionado no MDN aqui . No CSS, tentei usar, height:1pxmas isso não altera a espessura. Eu quero que a <hr>linha seja 0.5pxgrossa.

Estou usando o Firefox 3.6.11 no Ubuntu


Eu quero muito fino, o usuário não deve perceber que está lá, a menos que ele procure especificamente. De qualquer forma tentar ...
Srikar Appalaraju

7
Você também pode tentar torná-lo mais a cor do fundo para que ele combina ...
JustcallmeDrago

4
Como 1px é mínimo, você deve tornar a linha cinza claro se quiser que seja menos perceptível.
Gert Grenander

2
@MovieYoda: As dimensões podem ficar abaixo do pixel, mas a renderização será arredondada para o pixel mais próximo. É como esperar que um valor inteiro seja 1,23784 ... Impossível. Você pode configurá-lo para esse tipo de valor, mas será arredondado para o número inteiro mais próximo. Teoricamente, você poderia renderizar larguras arredondadas a 1/3 de pixel nos LCDs por causa de especificações tecnológicas, mas duvido que os navegadores também o façam. A dimensão restante do subpixel não pode ser de nenhuma cor porque está relacionada a apenas um dos fósforos RGB.
Robert Koritnik 11/11/2010

15
Nem meio pixel, meio px. A questão não é completamente boba. reddit.com/r/shittyprogramming/comments/20zyea/…
Luke Rehmann

Respostas:


524

Para obter consistência, remova todas as bordas e use a altura para a <hr>espessura. A adição de uma cor de plano de fundo dará estilo à sua <hr>altura e cor especificadas.

Na sua folha de estilo:

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

Ou inline como você tem:

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

Explicação mais longa aqui


10
por que você está fazendo border:none? Qualquer razão? A borda também adiciona espessura?
Srikar Appalaraju 11/11

11
Sim, queremos usar a cor de fundo para exibir a linha para obter consistência. FF usa a borda para criar o <hr>, mas não. Isso fará com que ambos sejam iguais.
Gregg B

2
Sim, sempre achei as tags <hr> em vários navegadores desagradáveis. É bom fazê-los se comportar corretamente.
Gregg B

Ou, se você precisar apenas de uma única vez, poderá fazê-lo em linha com<hr style="border: none; height:1px; color:#333; background-color:#333;">;
Jesse Chisholm

1
Quantos anos do IE para o fallback color?
trysis

53

Renderização de sub-pixel em navegadores

A renderização de sub-pixel é complicada. Você não pode esperar que um monitor processe uma linha fina menor que um pixel. Mas é possível fornecer dimensões sub-pixel. Dependendo do navegador, eles são processados ​​de maneira diferente. Confira a postagem do blog de John Resig sobre isso.

Basicamente, se o seu monitor for um LCD e você estiver desenhando linhas verticais, poderá desenhar facilmente uma linha de 1/3 pixel. Se o fundo for branco, dê a cor da linha de #f0f. Para os olhos, essa linha terá 1/3 de pixel de largura. Embora seja de alguma cor, se você ampliar o monitor, verá que apenas um segmento de todo o pixel (que consiste em RGB) ficará escuro. Essa é uma técnica bastante usada para sugestões de tipos finos, como o ClearType .

Mas as linhas horizontais podem ter apenas um pixel cheio de altura. Essa é a limitação da tecnologia dos monitores LCD. Os CRTs eram ainda mais complicados com seus fósforos triangulares (a menos que fossem do tipo grade de abertura, como Sony Trinitron), mas essa é uma história diferente.

Basicamente, fornecer uma dimensão de sub-pixel e esperar que ela seja renderizada dessa maneira é o mesmo que esperar que uma variável inteira armazene um número de 1.2034759349. Se você entende que isso é impossível, você deve entender que os monitores não podem render dimensões sub-pixel.

Estilo seguro para vários navegadores

Mas a maneira como as regras horizontais se misturam geralmente são feitas usando cores. Portanto, se o seu plano de fundo for, por exemplo, branco ( #fff), você sempre poderá iluminar HR muito . Like #eee.

O estilo seguro entre navegadores para uma regra horizontal muito leve seria:

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

E use um arquivo CSS em vez de estilos em linha. Eles fornecem uma definição central para todo o site e não apenas um elemento específico. Torna a manutenção muito melhor.


8

Eu estava procurando a maneira mais curta de desenhar uma linha de 1px, pois toda a carga de CSS separado não é a solução mais rápida ou mais curta.

Até HTML5, o WAS era uma maneira mais curta para 1px hr: <hr noshade> mas .. O atributo noshade de <hr> não é suportado no HTML5. Use CSS em seu lugar. (nem outros atributos usados ​​antes, como tamanho, largura, alinhamento ) ...


Agora, este é bastante complicado, mas funciona bem se for necessário 1px hr mais simples:

Variação 1, PRETO h: (melhor solução para preto)

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

Saída: FF, Opera - preto / Safari - cinza escuro


Variação 2, CINZENTO h (mais curto!):

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

Saída: Opera - cinza escuro / FF - cinza / Safari - cinza claro


Variação 3, COR conforme desejado:

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

Saída: Opera / FF / Safari: 1px vermelho.


Eu ficaria satisfeito, se alguém por favor testá-lo para Chrome e IE. As duas primeiras variações são bastante complicadas, esp. 2ª variação, que exibe o primeiro PRETO 1px visível.
Muscaria

Eu gosto dessa solução porque ela não codifica nenhuma informação de cor, o que pode ser útil para compatibilidade com o modo escuro. Funciona bem no Chrome.
tresf

6

Eu recomendaria definir o HRpróprio como 0pxalto e usar sua borda para ficar visível. Percebi que quando você aumenta ou diminui o zoom (ctrl + roda do mouse) a espessura HRmuda, enquanto que quando você define a borda, ela permanece sempre a mesma:

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

Vejo que, no Chrome mais recente, ele está mudando de espessura no restante da página. O que é pior, pode desaparecer se você diminuir o zoom :(
Pavel Alexeev

5

O atributo height foi descontinuado no html 5. O que eu faria é criar uma borda ao redor da hora e aumentar a espessura da borda da seguinte forma: hr style = "border: solid 2px black;"


1

Eu adicionei opacidade à linha, então parece mais fina:

<hr style="opacity: 0.25">

0

Acredito que a melhor conquista para a <hr>etiqueta de estilo é a seguinte:

hr {
color:#ddd;
background-color:
#ddd; height:1px;
border:none;
max-width:100%;
}

E para o código HTML apenas acrescentar: <hr>.


0

Aqui está uma solução para uma linha preta de 1 pixel sem borda ou margem

hr {background-color:black; border:none; height:1px; margin:0px;}
  • Testado no Google Chrome

Eu pensei que eu gostaria de acrescentar isso porque as outras respostas não incluem: margin:0px;.

  • Demo

hr {background-color:black; border:none; height:1px; margin:0px;}
<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>


-4

Sugiro usar construção como

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

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

Heheheh :) Nunca vi isso antes :)
Prakash Raman
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.