hr 요소의 색상을 변경합니다.

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개의 거의 알려지지 않은 CSS 사실"이라는 제목의 기사는 다음과 같이 언급합니다.<hr>설정할 수 있습니다.border-color그 부모에게요color 지정하면 됩니다.hr { border-color: inherit }요.

• border-colorChrome 및 Safari에서 작동합니다.
• background-color파이어폭스 오페라입니다.
• colorIE7+에서 작동합니다.

이게 유용할 것 같아요.이건 단순한 CSS 선택기였어요

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

<hr>

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

이렇게 하면 필요한 경우 높이를 변경할 수 있습니다.행운을 빌어요.출처:CSS를 사용하여 HR을 스타일링하려면 어떻게 해야 합니까?

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

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

바이올린을 보세요.

이렇게 하면 수평줄 1px의 두께가 유지되는 동시에 색상도 변경됩니다.

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

선을 다른 색으로 만드는 데는 색상이 있는 상단 테두리만 있으면 됩니다.

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

<hr>

hr {
  color: #f00;
  background-color: #f00;
  height: 5px;
}

여기 있는 모든 답을 읽고, 설명된 복잡성을 확인한 후, 인사 실험을 위해 작은 전환 작업을 시작했습니다.그리고 결론적으로, 당신이 쓴 대부분의 원숭이 패치 CSS를 버리고, 이 작은 입문서를 읽고, 이 두 줄의 순수한 CSS를 사용할 수 있습니다.

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

인사 스타일링에 필요한 것은 이것뿐입니다.

• 크로스 브라우저, 크로스 디바이스, 크로스 OS, 크로스 잉글리시 채널, 크로스 에이징을 지원합니다.
• "이렇게 하면 될 것 같다", "Safari/IE를 염두에 두어야 한다..." 등이 없습니다.
• css - no css - no css - no css - no css - no css - no about ada입니다.height, , 입니다.width, , 입니다.background-color, , 입니다.color, 등이 관련되었습니다.

방탄용 컬러풀한 인사입니다.그렇게 ^TM간단해요.

---

보너스 인사부에 어느 정도 높이를 부여합니다.H, 을 설정하기만 하면 됩니다border-width~로요.H/2요.

저는 이것이 가장 효과적인 접근법이라고 생각합니다.

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

또는 모든 hr 요소에 대해 이 작업을 수행하는 것을 선호하는 경우 CSS에 다음과 같이 적습니다.

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

hr {
  background-color: #123455;
}

배경은 여러분이 바꾸려고 노력해야 할 배경입니다.

테두리 색상으로 작업할 수도 있습니다.잘 모르겠어요. 크로스 브라우저 문제가 있는 것 같아요.다른 브라우저에서 테스트해야 합니다.

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

<hr class="bg-light" />

css 클래스를 사용하는 경우 모든 'hr' 태그가 클래스를 사용하지만, 특정 'hr'에 대해 원하는 경우 아래 코드(inline css)를 사용합니다.

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

크롬에서 작동하지 않는 경우 아래 코드를 사용해 보십시오.

<hr color="red" />

어떤 브라우저에서는 '먹다'를 사용하기도 합니다.color속성과 어떤 것들은 '아니다'를 사용합니다.background-color을 위해서입니다이겁니다.

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

간단하고 제가 제일 좋아하는 거예요.

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

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" />

테두리 너비는 0으로 설정해야 합니다. Firefox 및 Chrome에서 잘 작동합니다.

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

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

저는 평판이 좋지 않기 때문에 몇 가지 아이디어를 드리겠습니다.

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);

이 코드는 수직 회색 선을 표시합니다.

테두리 위에 해답이 있는 건 좋지만, 크롬에서는 아직 좀 이상해요...
하지만 만약 내가 정한다면요border-top: 1px solid black;그리고요.border-bottom: 0px;결국 진짜 한 줄로 끝납니다(높은 두께에서도 잘 작동합니다).

음, 저는 HTML, CSS, Java는 처음이지만 모든 브라우저에서 제 방식대로 작동하려고 노력했습니다.일부 브라우저에서는 작동하지 않는 CSS 대신 JS를 사용하였습니다.

우선은 제가 드렸습니다.id="myHR"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의 색상을 다음과 같이 읽어야 합니다.

"background-color: #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;
}

언급URL : https://stackoverflow.com/questions/6382023/changing-the-color-of-an-hr-element 입니다.