深色背景下border-top线条白边（伪影）消除方案咨询

这个问题是因为HR元素自带浏览器默认样式，加上深色背景下的渲染抗锯齿特性导致的。不用修改页面背景色的话，有两种靠谱的解决方式：

方案一：彻底重置HR的默认样式 #

直接清除HR自带的多余边框、高度和外边距，只保留需要的上边框，再同步背景色消除抗锯齿伪影：

html {
  background-color: rgba(47, 38, 31, 1.0);
}

.line {
  /* 清除HR默认的边框、高度、外边距 */
  border: none;
  height: 0;
  margin: 0;
  /* 设置目标上边框 */
  border-top: 30px solid #2274ca;
  /* 同步背景色，解决渲染时的抗锯齿白边 */
  background-color: #2274ca;
}

方案二：用DIV替代HR #

HR的默认样式规则比较复杂，换成DIV可以完全避免默认样式的干扰，直接通过高度和背景色实现相同效果：

<html>
  <body>
    <div class="line"></div>
  </body>
</html>

html {
  background-color: rgba(47, 38, 31, 1.0);
}

.line {
  height: 30px;
  background-color: #2274ca;
  border: none;
  margin: 0;
}

问题根源说明 #

原生HR默认带有border: 1px inset、height: 2px这类样式，即使你设置了border-top，剩余的默认边框或高度会在深色背景下产生缝隙；另外浏览器渲染边框时的抗锯齿算法，会在边框边缘生成浅色伪影，同步背景色就能覆盖这类伪影。

内容的提问来源于stack exchange，提问作者Shakalakah