如何改变水平线的颜色（<hr>元素）使用 CSS？

在网页设计中，经常需要使用水平线来分隔内容，而水平线的默认颜色是灰色，如果想要改变水平线的颜色，就需要使用 CSS。

方法一：使用 border 属性

可以使用 border 属性来设置水平线的颜色、宽度和样式，如下所示：

hr {
  border: 1px solid #f00;
}

其中，1px 是水平线的宽度，solid 是水平线的样式，#f00 是水平线的颜色（此处为红色）。

方法二：使用 background-color 属性

如果想要改变水平线的颜色而不改变其样式和宽度，可以使用 background-color 属性，如下所示：

hr {
  background-color: #f00;
}

方法三：使用 CSS 变量

在 CSS3 中，可以使用 CSS 变量来定义水平线的颜色，定义方法如下：

:root {
  --hr-color: #f00;
}

hr {
  border-top: 1px solid var(--hr-color);
}

其中，:root 选择器定义了全局的 CSS 变量 --hr-color，然后在 hr 元素中使用 var() 函数来引用该变量。

以上三种方法都可以很好地改变水平线的颜色，选择哪一种方法主要是根据需要改变水平线的样式和宽度来决定。