更改hr元素的颜色 [英] Changing the color of a hr element

问题描述

我想使用CSS更改我的 hr 标签的颜色。我尝试下面的代码似乎不工作：

I want to change the color of my hr tag using CSS. The code I've tried below doesn't seem to work:

hr {
  color: #123455;
}

推荐答案

code> border-color 而不是 color ，如果你的意图是改变由< hr> 标签。

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.

尽管在评论中指出，如果改变线条的大小，仍然与您在样式中指定的一样宽，并且行将使用默认颜色填充（这在大多数时间不是期望的效果）。所以在这种情况下，你还需要指定 background-color （如@Ibu在他的答案中建议）。

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

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

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

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

标题为 ：//www.sitepoint.com/12-little-known-css-facts/>最近由SitePoint发布的12个小知名的CSS事实提到< hr> ;如果指定，则可以将其 border-color 设置为其父级的 color $ c> hr {border-color：inherit} 。

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 }.

这篇关于更改hr元素的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！