问高度为1px或0.1rem的<hr>标签呈现方式不同

EN

0.1rem (1px)高度的hr标签有不同的厚度。这可以通过使用边框顶部属性而不是高度来解决。但我需要实现一个梯度颜色的标签，这是可能的，只有通过背景图像，所以我必须使用高度，我想。https://codepen.io/TitaniumGT/pen/JjpLpGj

这个问题在代码页中已经被复制了，但是边框顶部的修复在这里不起作用，造成了同样的问题，当使用高度时会发生同样的问题。它似乎发生在双数行。

 hr {
  border: 0;
}
.line {
  height: 0.1rem;
  // border-top: 0.1rem solid;
  background-color: $color-primary-dark;
  margin: 1rem 0;
}

有人能帮我做这个吗。如果没有解决方案，是否有任何方法向边界添加渐变？