Html

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

서브 픽셀 렌더링 은 까다 롭습니다. 실제로 모니터가 픽셀보다 작은 선을 렌더링한다고 기대할 수는 없습니다. 그러나 하위 픽셀 크기를 제공 할 수 있습니다. 브라우저에 따라 다르게 렌더링합니다. 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 파일을 사용하십시오. 특정 요소뿐만 아니라 전체 사이트에 대한 중앙 정의를 제공합니다. 유지 보수성이 훨씬 우수합니다.

답변

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

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

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

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

<hr style="opacity: 0.25">

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