更改hr元素的颜色

问题描述：

我想使用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> ;如果指定，则$ c>可以将其 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元素的颜色

相关推荐