HTML5如何改变hr的颜色

要改变HTML5中`<hr>`元素的颜色，你可以直接在CSS中使用`border-color`属性。这是一个简单的例子：

hr {
  border: none; /* 去掉默认的边框 */
  border-top: 1px dotted; /* 设置为虚线并指定颜色 */
  color: red; /* 或者用color属性替换边框颜色 */
}

在这个例子中，我们首先将`border`属性设置为`none`以移除默认的边框样式，然后使用`border-top`来添加一条顶部的虚线边框，并通过`color`属性设置线条的颜色。

如果你遇到在Firefox中`<hr>`显示较粗的问题，那可能是因为Firefox对于点线的渲染方式与其它浏览器不同。为了解决这个问题，你可以尝试使用`border-style`属性明确指定为`dotted`：

hr {
  border: none;
  border-top: 1px dotted red;
  border-style: dotted; /* 添加这行强制Firefox使用虚线模式 */
}