如何创建由蓝红单像素线组成的2px高无间距水平线条？

有两种简单的实现方式，分别对应你提到的<hr>标签和div方案：

方案一：使用<hr>标签实现 #

利用CSS伪元素给<hr>添加上下两条颜色不同的线条，核心是把<hr>本身的高度设为0，再通过绝对定位的伪元素生成两条1px的线条：

hr.double-line {
  height: 0;
  border: none;
  position: relative;
  margin: 1em 0;
}

hr.double-line::before,
hr.double-line::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
}

hr.double-line::before {
  top: 0;
  background-color: blue;
}

hr.double-line::after {
  bottom: 0;
  background-color: red;
}

使用时给<hr>加上类名即可：

<hr class="double-line">

方案二：使用带边框的div实现 #

这种方法更直观，通过给div设置上下边框来实现两条无间距的线条，总高度刚好是2px：

div.double-line {
  height: 0;
  border-top: 1px solid blue;
  border-bottom: 1px solid red;
  margin: 1em 0;
}

使用方式：

<div class="double-line"></div>

两种方案都能实现需求，div方案代码更简洁，<hr>方案则更符合语义化（如果这条线用于内容分隔场景）。

内容的提问来源于stack exchange，提问作者R. Apps