在HTML中，`<hr>` 元素用于表示主题区域中的话题分隔或段落间的断开。在默认情况下，`<hr>` 元素会显示为一个水平线，它的样式可以通过CSS进行定制，包括颜色的修改。

要更改`<hr>`元素的颜色，您可以通过为其设置CSS样式来完成。这里有几种方法可以实现：

### 使用内联样式

您可以直接在`<hr>`标签中使用`style`属性来设置颜色：

```html
<hr style="border: none; height: 2px; background-color: #ff0000;" />
```

在这个例子中，我们设定了`<hr>`的`border`属性为`none`以移除默认的边框样式，`height`设置了线条的粗细，`background-color`设置了颜色为红色（`#ff0000`）。

### 使用内部或外部CSS

您还可以在HTML文档的`<head>`部分用`<style>`标签定义CSS规则，或者在外部的CSS文件中定义，并链接到HTML文档。

#### 内部样式

在HTML文档的`<head>`部分:

```html
<style>
    hr.customHr {
        border: none;
        height: 2px;
        background-color: #ff0000; /* 红色 */
    }
</style>
```

然后在HTML体中应用这个类：

```html
<hr class="customHr" />
```

#### 外部样式

在外部的`.css`文件中:

```css
.customHr {
    border: none;
    height: 2px;
    background-color: #ff0000; /* 红色 */
}
```

在HTML文档中链接这个CSS文件：

```html
<link rel="stylesheet" type="text/css" href="styles.css" />
```

然后在HTML体中应用这个类：

```html
<hr class="customHr" />
```

### 注意事项

- 在最新的HTML和CSS规范中，建议使用`background-color`而不是`border-color`来改变`<hr>`的颜色，因为`<hr>`通常被视为块级元素，其边框颜色可能不会产生预期效果。
- 为了确保兼容性和一致的表现，在改变颜色前先移除或重置`border`属性是个好习惯。

以上就是如何更改`<hr>`元素颜色的几种方法。

CSS 如何更改 hr 元素的颜色

1个答案

使用内联样式

使用内部或外部CSS

内部样式

外部样式

注意事项

你的答案