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

【问题标题】：hr tag shows a line in 2 colors against a colored backgroundhr 标签在彩色背景下显示 2 种颜色的线条
【发布时间】：2020-01-26 22:30:51
【问题描述】：

我使用 hr 标签。它工作得很好，直到我给文本一个彩色背景。现在我看到黑线下面有一条白线。如何只看到黑线？

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

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

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

  <hr />

Testing<br />
Testing<br />

</div>

【问题讨论】：

hr { border-top: 0;border-bottom: #fff 1px solid; }
如果你想知道为什么，那是因为默认样式设置为inset，这会产生两种颜色的效果

标签： html css colors background-color

【解决方案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>

【讨论】：

【解决方案2】：

要更改hr 的颜色，请使用border-color 而不是color。

要更改hr 的高度，请操作边框宽度：

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

hr {
  border-color: black;
  border-top-width: 0px;
}

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

  <hr /> Testing

  <br /> Testing
  <br />

</div>

【讨论】：