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 }

• border-colorChrome 및 Safari 에서 작동합니다 .
• background-color Firefox 및 Opera에서 작동합니다.
• colorIE7 + 에서 작동합니다 .

나는 이것이 유용 할 수 있다고 생각합니다. 이것은 간단한 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 픽셀로 유지하면서 색상도 변경합니다.

이것이 가장 효과적인 방법이라고 생각합니다.

<hr style="border-top: 1px solid #ccc; background: transparent;">

또는 모든 hr 요소 에서이 작업을 선호하는 경우 CSS에 작성하십시오.

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

hr
{
색상 : # f00;
배경색 : # f00;
높이 : 5px;
}

hr
{
  background-color: #123455;
}

배경은 당신이 변경하려고 시도하는 것입니다

테두리 색상으로 작업 할 수도 있습니다. 나는 이것에 크로스 브라우저 문제가 있다고 생각하지 않습니다. 다른 브라우저에서 테스트해야합니다

css 클래스를 사용하는 경우 모든 'hr'태그가 사용하지만 특정 'hr'을 원하면 아래 코드를 사용하십시오. 즉, 인라인 CSS

<hr style="color:#99CC99" />

크롬에서 작동하지 않으면 아래 코드를 시도하십시오.

<hr color="red" />

여기에있는 모든 답변을 읽고 설명 된 복잡성을 본 후 HR을 실험하기 위해 약간의 전환을 시작했습니다. 그리고 결론은 작성한 대부분의 원숭이 패치 CSS를 버리고이 작은 입문서를 읽고이 두 줄의 순수한 CSS를 사용할 수 있다는 것입니다.

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

이것이 HR을 스타일링하는 데 필요한 전부 입니다.

• 교차 브라우저, 교차 장치, 교차 OS, 교차 영어 채널, 교차 연령으로 작동합니다.
• 아니오 "이것이 효과가 있다고 생각합니다 ..." , "Safari / IE를 명심해야합니다 ..." 등
• 별도의 CSS는 - 아니 height, width, background-color, color, 등을 포함했다.

방탄 다채로운 인사. 그것은이다 그 간단한의 ^TM .

보너스 : 인사에게 약간의 높이를 제공하기 위해 H, 그냥 설정 border-width으로 H/2.

일부 브라우저는 color속성을 사용하고 일부 브라우저는 속성을 사용 background-color합니다. 안전하다:

hr{
    color: #color;
    background-color: #color;
}

2015 년 5 월 IE, Firefox 및 Chrome에서 테스트 중이며 현재 버전에서 가장 잘 작동합니다. HR을 중심에두고 너비를 70 %로 만듭니다.

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}

<hr class="light" />

border-width를 0으로 설정해야합니다. Firefox 및 Chrome에서 잘 작동합니다.

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

<hr />
This is a test
<hr />

간단하고 내가 가장 좋아하는 것입니다.

<hr style="background-color: #dd3333" />

부트 스트랩 bg 클래스를 다음과 같이 추가 할 수 있습니다

<hr class="bg-light" />

언급 할만한 평판이 없기 때문에 여기에 몇 가지 아이디어를 드리겠습니다.

CSS 변수 높이를 원하면 모든 테두리를 벗고 배경색을 지정하십시오.

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

간단하게 작동하는 스타일을 원할 경우 (예 : 대부분의 이메일 클라이언트의 :: before 요소에서 테두리를 바꾸거나

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

두 가지 방법으로, 너비를 설정하면 항상 너비가됩니다.

이를 설정할 필요가 없습니다 display:block;.

완전히 안전하기 위해, 일부 브라우저는 height:0px;다음 과 혼동 될 수 있습니다 .

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

이 방법을 사용하면 높이가 2px 이상인지 확인할 수 있습니다.

더 많은 라인이지만 안전은 안전입니다.

이것은 거의 모든 것과 호환되도록 사용해야하는 방법입니다.

참고 : Gmail은 인라인 CSS 만 감지하며 일부 이메일 클라이언트는 배경 또는 테두리를 지원하지 않을 수 있습니다. 하나가 실패하면 여전히 1px 줄이 있습니다. 아무것도없는 것보다는 낫다.

최악의 경우 추가를 시도 할 수 있습니다 color:blue;.

최악의 경우 <font color="blue"></font>태그 를 사용 하여 소중한 <hr/>태그를 넣을 수 있습니다. <font></font>태그 색상 을 상속합니다 .

이 방법을 사용하면 것 같은 싶지 : <hr width="50" align="left"/>.

예:

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <font color="#42B3E5"><hr width="50" align="left"/></font>
    </span>
    <!--Doesn't work in ie7 and below and in Quirks Mode-->

확인할 링크는 다음과 같습니다. http://jsfiddle.net/sna2D/

CSS를 사용하여 다른 색으로 선을 만들 수 있습니다. 예를 들면 다음과 같습니다.

border-left: 1px solid rgb(216, 216, 216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216);

해당 코드는 세로 회색 선을 표시합니다.

글쎄, 나는 HTML, CSS 및 Java에서 처음이지만 모든 브라우저에서 나를 위해 일한 방식을 시도했다. 일부 브라우저에서는 작동하지 않는 CSS 대신 JS를 사용했습니다 .

우선 id="myHR"HR 요소에 부여 하여 Java Script에서 사용했습니다.
여기 코드가 있습니다.

x = document.getElementById("myHR");
y = x.style.width = "600px";
y = x.style.color = "white";
y = x.style.height = "2px";
y = x.style.border = "none";
y = x.style.backgroundColor = "lightgrey";

1. 이전 IE의 코드 작동

2. 많은 색깔을 시험해 보았습니다

   <hr color="black">
   <hr color="blue">

글꼴 색상을 사용하여 가로 규칙을 수정하면보다 유연하고 사용하기 쉽습니다.

이 color속성은 기본적으로 상속되지 않으므로 색상 상속을 허용하려면 hr에 다음을 추가해야합니다.

/* allow hr to inherit color */
hr { border: 1px solid;}

/* reusable colour modifier */
.fc_-alpha { color: crimson;}

normal hr:

<hr>

hr with <span class="fc_-alpha">colour modifier</span>:

<hr class="fc_-alpha">

당신은 이것을 할 수 있습니다 :

hr {
  border: 1px solid red;
}

<hr />
This s a test
<hr />

당신이 줄 수있는 <hr noshade>태그와 CSS 파일과 추가로 이동 :

hr {
    border-top:0;
    color: #123455;
}

<hr noshade />
This s a test
<hr noshade />

일반적으로 CSS를 사용하여 수평선의 색상을 설정할 수는 없습니다. 우선 Internet Explorer는 다음과 같이 CSS 색상이 필요합니다.

“색상 : # 123455”

그러나 Opera와 Mozilla는 다음과 같이 CSS 색상이 필요합니다.

"배경색 : # 123455"

따라서 CSS에 두 옵션을 모두 추가해야합니다.

다음으로 수평선에 치수를 지정하거나 브라우저에서 설정 한 표준 높이, 너비 및 색상으로 기본 설정합니다. 다음은 CSS가 파란색 수평선을 표시하는 모습의 샘플 코드입니다.

hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}

또는 다음과 같이 수평선을 삽입 할 때 HTML 페이지에 직접 스타일을 추가 할 수 있습니다.

<hr style="background:#123455" />

도움이 되었기를 바랍니다.

나는 매번 내기를했다 :

  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }