如何在 <hr> 标签上设置背景颜色？答案

【问题标题】：How to set background-color on <hr> tag?如何在 <hr> 标签上设置背景颜色？
【发布时间】：2017-06-16 08:30:39
【问题描述】：

为什么hr 标签元素没有设置为绿色，如下所示？

hr {
  background-color: #00ff00;
}

&lt;hr&gt;

【问题讨论】：

你读过这个问题吗：stackoverflow.com/questions/6382023/…？
Changing the color of a hr element的可能重复
乔希似乎是正确的。你看到的默认hr的黑色是它的边框而不是它的背景，你需要设置border-color。仅当您为 hr 提供高度属性时，背景才会可见并且需要设置 background-color
默认浏览器渲染，hr 标签从CSS 的border-bottom-color 属性中获取颜色。您可以通过定位 border-color 属性来覆盖它。如果您只将color 属性赋予hr 标签，它甚至可以工作，因为默认情况下border-color 从text-color 获取inherited。

标签： html css

【解决方案1】：

backround-color 只是通过应用内联样式为 hr 设置背景，我们可以使它更容易。 https://jsbin.com/wuvolojuzu/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>Hello</p>
  <hr color="red" width="100%" />
  <p>Hi</p>
</body>
</html>

【讨论】：

【解决方案2】：

您提供的代码将正确设置背景颜色。然而，<hr> 标签没有可见的背景，所以它看起来不会做任何事情。你可能想要的是改变它的颜色：

hr {
   color: #00ff00;
}

这将使<hr> 线变为绿色。

如果没有，可能还有另一个元素具有更多 specificity。在这种情况下，您有多种选择：

1) 为 hr 选择器添加更多特异性。

2) 设置颜色为!important:

hr {
   color: #00ff00 !important;
}

3) 内联设置背景颜色：

<hr color="#00ff00" />

希望这会有所帮助！

【讨论】：

【解决方案3】：

通常你不能为hr标签设置background-color。这是一个空元素。它必须有开始标签，但不能有结束标签。 hr 仅接受 color 属性。例如：

<hr color="#00ff00" />

默认hr值：

margin: 7px or 8px /*depend on box-modeling. */
border: 1px inset #000;
display: block;
/* No height */

标准使用：

margin-top: 10px; /* You can change margin height */
margin-bottom: 10px; /* You can change margin height */
border: 0; /* or border-top: 5px solid #00ff00 */
border-width: 5px 0 0 0;
border-style: solid;
border-color: #00ff00;

hr{
  margin-top: 15px;
  margin-bottom: 15px;
  border: 0;
  border-top: 5px solid #00ff00;
}

<html>
  <body>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <hr />
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>

我希望这会有所帮助。

【讨论】：