使用 CSS 自定义 hr 标签

在 HTML 页面中，我们常常需要用到分隔线来区分不同的内容模块。而 <hr> 元素是 HTML 中最常用的标记之一，用于分割一段内容，并在页面上生成一条横向线条。默认情况下，<hr> 元素会生成一条灰色的线，但我们也可以通过 CSS 样式来自定义它的外观。

基本用法

先来看一下 hr 标签的基本语法：

<hr>

默认情况下，这行代码会生成一条水平线段，样式取决于浏览器的默认设置。

CSS 样式设置

通过 CSS 样式可以方便地自定义 hr 标签的外观。以下是一些常见的示例。

修改颜色

我们可以通过 CSS 来改变 hr 标签的颜色：

hr {
    color: red;
}

这样就可以将分割线设置为红色。

修改样式

我们还可以通过 CSS 来调整分割线的样式。以下是一些常见的示例：

/* 设置虚线 */
hr {
    border-style: dashed;
}

/* 设置实线 */
hr {
    border-style: solid;
}

/* 设置双实线 */
hr {
    border-style: double;
}

/* 设置点状线 */
hr {
    border-style: dotted;
}

修改高度

默认情况下，hr 标签的高度为 2px。我们可以使用 CSS 来调整这个高度：

/* 将高度设为10px */
hr {
    height: 10px;
}

修改宽度

hr 标签的宽度默认为占满整个父容器的宽度。如果需要调整宽度，我们可以使用 CSS 中的 width 属性。

/* 将宽度设为50% */
hr {
    width: 50%;
}

修改间距

通过 margin 和 padding 属性可以调整分割线的间距。以下是一些常用的示例：

/* 调整上下间距 */
hr {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* 调整左右间距 */
hr {
    margin-left: 50px;
    margin-right: 50px;
}

/* 调整内边距 */
hr {
    padding: 10px;
}

扩展阅读

如果需要进一步自定义 hr 标签的样式，可以参考以下链接：

• CSS-Tricks - Styling HR Elements

• MDN - Styling HTML HR Element

以上就是关于自定义 hr 标签的介绍。通过 CSS 样式可以轻松实现复杂的分隔线效果，使网页更加美观。