颜色在<hr>标签上?

为什么hr标签元素未设置为绿色,如下所示编码?

hr {
  background-color: #00ff00;
}
<hr>

您提供的代码将正确设置背景颜色。 但是, <hr>标签没有可见背景,因此它不会显示任何内容。 你可能想要改变它的颜色

hr {
   color: #00ff00;
}

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

如果不是,那么可能会有另一个更具特异性的元素。 在这种情况下,您有多种选择:

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

2)将颜色设置为!important

hr {
   color: #00ff00 !important;
}

3)内联设置背景颜色:

<hr color="#00ff00" />

希望这可以帮助!


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>

通常你不能为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>
链接地址: http://www.djcxy.com/p/15751.html

上一篇: color on <hr> tag?

下一篇: How to style up a hr tag