color on <hr> tag?

2018-06-04 21:38:41

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

hr {
  background-color: #00ff00;
}

<hr>

The code you provided will set the background colour correctly. However, the <hr> tag doesn't have a visible background, so it won't appear to do anything. What you probably instead want is to change its color :

hr {
   color: #00ff00;
}

That will make the <hr> line green.

If it doesn't, there's probably another element with more specificity. In that case, you have a number of options:

1) Add more specificity to the hr selector.

2) Set the colour as !important :

hr {
   color: #00ff00 !important;
}

3) Set the background colour inline:

<hr color="#00ff00" />

Hope this helps!

The backround-color just sets background for hr by applying inline style we can make it easier. 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>

Normally you can't set background-color for hr tag. This is an empty element. It must have start tag, but must not have an end tag. hr Only accept color property. For example:

<hr color="#00ff00" />

Default hr value:

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

Standard use:

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/15752.html

上一篇: 悬停时无法更改水平标尺颜色

下一篇: 颜色在<hr>标签上？