创建一条 2 像素高的水平线 - 有 2 种不同的颜色

Question

我想创建一条 2 px 高的水平线的效果。本质上是夹在一起的两条单像素高度线。每条线都是不同的颜色。

所以第一行（单个像素高度）是蓝色的。正下方没有间距的第二条单像素线为红色。

不确定这是否可以使用

<HR>

实现，或者它是否需要是带边框的 div？

非常感谢任何帮助。

还没有真正找到任何有用的东西。

Answer 1

假设这需要在

div

的底部完成，没有任何额外的 DOM 元素，您可以使用

box-shadow

来实现它。 （但是，红色的第二行不会占用任何空间，因此您可能需要添加一个

margin-bottom

来补偿它）

虽然它被命名为

box-shadow

，但当它在没有

blur

/

spread

参数的情况下使用时，它看起来就像一个实线/块。

div {
  border-bottom: 1px solid blue;
  box-shadow: 0 1px red;
}

<div>Hello</div>

Answer 2

<hr>

只是一个普通的块元素，这意味着我们可以使用

border-*

属性来设置它的样式：

hr {
  border-top: 1px solid blue;
  border-bottom: 1px solid red;
}

<hr>