html - 更改hr元素的颜色(Changing the color of an hr element)

Question

I want to change the color of my hr tag using CSS.

(我想使用CSS更改hr标签的颜色。)

The code I've tried below doesn't seem to work:

(我在下面尝试过的代码似乎不起作用：)

hr {
    color: #123455;
}

  ask by koool translate from so

Answer 1

I think you should use border-color instead of color , if your intention is to change the color of the line produced by <hr> tag.

(我想如果要更改<hr>标记生成的行的color ，则应使用border-color而不是color 。)

Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time).

(虽然，在注释中已经指出，如果您更改线条的大小，边框仍将与样式中指定的宽度一样，并且线条将被填充为默认颜色（大多数情况下这不是期望的效果）时间）。)

So it seems like in this case you would also need to specify background-color (as @Ibu suggested in his answer).

(因此，在这种情况下，您似乎还需要指定background-color （如@Ibu在其答案中建议的那样）。)

HTML 5 Boilerplate project in its default stylesheet specifies the following rule:

(HTML 5 Boilerplate项目的默认样式表中指定以下规则：)

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

An article titled “12 Little-Known CSS Facts” , published recently by SitePoint, mentions that <hr> can set its border-color to its parent's color if you specify hr { border-color: inherit } .

(SitePoint最近发表了一篇名为“ 12个鲜为人知的CSS事实”的文章，其中提到<hr>如果指定hr { border-color: inherit }可以将其border-color设置为其父级的color 。)