<hr> 高度1px或0.1rem渲染不同的标签

Question

hr 0.1rem (1px) 高度的标签有不同的厚度。这可以通过使用 border-top 属性而不是高度来解决。但是我需要实现一个渐变颜色来标记，这只能通过背景图像实现，所以我猜我必须使用高度。 https://codepen.io/TitaniumGT/pen/JjpLpGj
该问题已在 codepen 中重复出现，但 border-top 修复在这里不起作用，并且会产生与使用高度时发生的相同问题。它似乎发生在偶数行。

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

有人可以帮我解决这个问题吗？如果没有解决办法，有什么方法可以给边框添加渐变吗？

Answer 1

这对我有用

hr{
border-width: 5px; 
border-image: linear-gradient(to right,white,black,white) 1;
}

注意：border-image 中的 1 已拉伸 linear-gradient 到线的所有宽度

<hr> 高度1px或0.1rem渲染不同的标签

<hr> tag of height 1px or 0.1rem rendering differently

html

css

tags