<hr> 태그의 두께를 변경하는 방법

<hr>CSS에서 가로 규칙의 두께 ( ) 를 변경하고 싶습니다 . HTML처럼 그렇게 할 수 있다는 것을 알고 있습니다.

<hr size="10">

그러나 여기 MDN에 언급 된 것처럼 이 기능은 더 이상 사용되지 않는다고 들었 습니다 . CSS에서는 사용하려고 시도 height:1px했지만 두께는 변경되지 않습니다. 나는 <hr>선이 0.5px두껍기 를 원합니다 .

우분투에서 Firefox 3.6.11을 사용하고 있습니다

일관성을 유지하려면 테두리를 제거하고 <hr>두께 의 높이를 사용하십시오 . 배경색을 추가하면 <hr>지정된 높이와 색으로 스타일이 지정됩니다.

스타일 시트에서 :

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

또는 인라인으로 인라인하십시오.

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

더 자세한 설명은 여기

브라우저에서 서브 픽셀 렌더링

서브 픽셀 렌더링 은 까다 롭습니다. 실제로 모니터가 픽셀보다 작은 선을 렌더링한다고 기대할 수는 없습니다. 그러나 하위 픽셀 크기를 제공 할 수 있습니다. 브라우저에 따라 다르게 렌더링합니다. John Resig의 블로그 게시물을 확인하십시오.

기본적으로 모니터가 LCD이고 세로선을 그리는 경우 1/3 픽셀 선을 쉽게 그릴 수 있습니다. 배경이 흰색이면 선 색상을으로 지정하십시오 #f0f. 눈에는이 선의 너비가 픽셀의 1/3입니다. 컬러로 표시되지만 모니터를 확대하면 전체 픽셀의 한 세그먼트 (RGB로 구성) 만 어두워지는 것을 알 수 있습니다. 이것은 미세한 유형 힌트, 즉 ClearType에 사용되는 기술입니다 .

그러나 수평선은 최대 픽셀 높이 일 수 있습니다. 이것이 LCD 모니터의 기술 한계입니다. CRT는 삼각 형광체로 인해 훨씬 ​​더 복잡했지만 ( 조리개 그릴 형식 (예 : Sony Trinitron)이 아닌 한) 다른 이야기입니다.

기본적으로 서브 픽셀 차원을 제공하고 렌더링 방식을 기대하는 것은 정수 변수가 1.2034759349의 숫자를 저장할 것으로 기대하는 것과 같습니다. 이것이 불가능하다는 것을 이해하면 모니터가 서브 픽셀 크기를 렌더링 할 수 없다는 것을 이해해야합니다.

크로스 브라우저 안전 스타일

그러나 수평 규칙이 혼합되는 방식 은 일반적으로 색상을 사용하여 수행됩니다. 따라서 배경이 예를 들어 흰색 ( #fff)이면 항상 HR 매우 밝게 만들 수 있습니다 . 처럼 #eee.

매우 가벼운 수평 규칙에 대한 크로스 브라우저 안전 스타일은 다음과 같습니다.

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

인라인 스타일 대신 CSS 파일을 사용하십시오. 특정 요소뿐만 아니라 전체 사이트에 대한 중앙 정의를 제공합니다. 유지 보수성이 훨씬 우수합니다.

분리 된 CSS의 전체로드가 가장 빠르거나 가장 짧은 솔루션이 아니기 때문에 1px 선을 그리는 가장 짧은 방법을 찾고있었습니다.

HTML5까지는 1px 시간 동안 더 짧은 방법 인 <hr noshade> but .. <hr>의 noshade 속성은 HTML5에서 지원되지 않습니다. 대신 CSS를 사용하십시오. ( 크기, 너비, 정렬 로 이전에 사용 된 다른 복장도 없음 ) ...

이제 이것은 매우 까다 롭지 만 가장 간단한 1px 시간이 필요한 경우 잘 작동합니다.

변형 1, BLACK hr : (검정에 가장 적합한 솔루션)

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

출력 : FF, Opera-검정 / Safari-진회색

변형 2, 회색 시간 (최단!) :

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

출력 : Opera-짙은 회색 / FF-회색 / Safari-밝은 회색

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

출력 : Opera / FF / Safari : 1px 빨강.

HR자체를 0px높게 설정하고 대신 테두리를 사용하는 것이 좋습니다. 확대 및 축소 (Ctrl + 마우스 휠) HR자체 의 두께가 변경되는 반면 테두리를 설정하면 항상 동일하게 유지됩니다.

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

height 속성은 html 5에서 더 이상 사용되지 않습니다. 내가 할 일은 hr 주위에 테두리를 만들고 다음과 같이 테두리의 두께를 늘리는 것입니다. hr style = "border : solid 2px black;"

선에 불투명도를 추가하여 더 얇아 보입니다.

<hr style="opacity: 0.25">

스타일링 <hr>태그 의 가장 좋은 성과 는 다음과 같습니다.

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

그리고 HTML 코드의 경우 다음을 추가하십시오 <hr>.

다음은 테두리 또는 여백이없는 1 픽셀 검은 선에 대한 솔루션입니다.

hr {background-color:black; border:none; height:1px; margin:0px;}

• Chrome에서 테스트

다른 답변에 포함되지 않았기 때문에 이것을 추가 할 것이라고 생각했습니다 margin:0px;.

• 데모

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>

나는 같은 구조를 사용하는 것이 좋습니다

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

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