html - hr 标签在彩色背景下显示 2 种颜色的线条

Question

我使用 hr 标签。它运行良好，直到我给文本添加了彩色背景。现在我看到黑线下面有一条白线。如何只看到黑线？

div {
  background-color: #eab126;
  min-height: 100px;
}

hr {
  height: 1px;
  color: #fff;
}

<div>
    Testing<br />
    Testing<br />

  <hr />

Testing<br />
Testing<br />

</div>

Answer 1

您需要更改 hr 标记的 CSS，

默认样式表中的 HTML 5 Boilerplate 元素 specifies遵循以下规则:

hr { display: block; height: 1px;
border: 0; border-top: 1px solid #ccc;
margin: 1em 0; padding: 0; }

div {
  background-color: #eab126;
  min-height: 100px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid white;
  margin: 1em 0;
  padding: 0;
}

<div>
  Testing<br /> Testing
  <br />

  <hr /> Testing

  <br /> Testing
  <br />

</div>