hr 요소의 색상 변경 의 색상을 변경하고

hrCSS를 사용하여 태그 의 색상을 변경하고 싶습니다 . 아래에서 시도한 코드가 작동하지 않는 것 같습니다.

hr {
    color: #123455;
}

태그로 생성 된 선의 색상을 변경하려는 경우 border-color대신 대신 사용해야한다고 생각합니다 .color<hr>

주석에서 선의 크기를 변경해도 테두리는 스타일에서 지정한만큼 넓어지고 선은 기본 색상으로 채워집니다 (대부분의 효과는 아닙니다) 시각). 따라서이 경우 background-color@Ibu가 그의 대답에서 제안한대로 지정 해야하는 것처럼 보입니다.

기본 스타일 시트의 HTML 5 상용구 프로젝트 는 다음 규칙을 지정 합니다.

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

최근 SitePoint에서 발행 한 “12 Little-Known CSS Facts” 라는 기사 는 사용자가 지정한 경우 이를 부모의 것으로 <hr>설정할 수 있다고 언급합니다 .border-colorcolorhr { border-color: inherit }

나는 이것이 유용 할 수 있다고 생각합니다. 이것은 간단한 CSS 선택기였습니다.

hr { background-color: red; height: 1px; border: 0; }

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

이 방법으로 필요한 경우 높이를 변경할 수 있습니다. 행운을 빕니다. 출처 : CSS로 HR 스타일을 지정하는 방법

Firefox, Opera, Internet Explorer, Chrome 및 Safari에서 테스트되었습니다.

hr {
    border-top: 1px solid red;
}

선을 다른 색으로 만들려면 색상이있는 경계선만으로 충분합니다.

hr {
    border-top: 1px solid #ccc;
}

hr {
  height:0;
  border:0;
  border-top:1px solid #083972; 
}

이렇게하면 수평 규칙의 두께를 1 픽셀로 유지하면서 색상도 변경합니다.

How IT