改变hr元素的颜色 [英] Changing the color of an hr element

问题描述

我想用CSS改变我的 hr 标签的颜色。我在下面试过的代码看起来并不起作用：

$ b

  hr {
颜色：＃123455; 
 
  

解决方案

我认为您应该使用 border-color 而不是 color ，如果你的目的是改变< hr> 标记。

虽然，有人在评论中指出，如果您更改行的大小，仍然与样式中指定的一样宽，并且线条将被填充默认颜色（这在大多数情况下不是所期望的效果）。因此，在这种情况下，您还需要指定 background-color （正如@Ibu在他的回答中所建议的那样）。

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

  hr {
 display：block; 
 height：1px; 
 border：0; 
 border-top：1px solid #ccc; 
保证金：1em 0; 
 padding：0; 
} 
  

SitePoint最近发布的12个鲜为人知的CSS事实，提及< hr> ;如果指定<$ c>，可以将它的 border-color 设置为其父颜色 $ c> hr {border-color：inherit} 。

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

解决方案

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.

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

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屋！