在 HTML 中自定义 HR 标签的粗细

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

在 HTML 中自定义 HR 标签的粗细

作者：迹忆客最近更新：2023/05/05 浏览次数：

本文解释了 HTML 中的 <hr> 标记。我们还将解释 <hr> 标签的属性及其自定义，即 CSS 中粗细、颜色和不透明度的变化。

我们将通过创建一个 HTML 项目并实现 <hr> 标签来进行演示。

HTML 中的 hr 标签

HTML 中的 <hr> 标记使您能够添加主题分隔符或水平线来分隔或拆分文档部分。

需要适当的 CSS 来自定义它。它不需要结束标记。它的基本语法如下：

<hr property: value;> ...

属性:

align：该属性可以对齐页面上的水平线。左、中和右是对齐属性的可能值。
noshade：指定线条没有阴影效果。
size：指定水平线的高度。
width：指定水平线的宽度。
color：指定水平线的颜色。

学习 hr 标签功能的实例

让我们创建一个示例 HTML 项目来实现 <hr> 标签。打开操作系统支持的任何 HTML 编辑器，例如 Notepad/Notepad++ (PC) 或 TextEdit (Mac)。

在编辑器中编写以下简单的 HTML 代码，将文件保存为 Filename.html，并在任何支持的 Web 浏览器中打开保存的文件。

<!DOCTYPE html>
<html>
    <body>
        <center>
            <h1>Sample Task to Practice hr Tag</h1>
            <p>Paragraph to split.</p>
        </center>
    </body>
</html>

在 HTML 中插入水平线

通过在源文件中插入 <hr> 标记，在标题和段落之间设置一个水平分隔符。

将以下代码片段复制到上面创建的 HTML 文件中。

<!DOCTYPE html>
<html>
    <body>
        <center>
            <h1>Sample Task to Practice hr Tag</h1>
            <hr>
            <p>Paragraph to split.</p>
        </center>
    </body>
</html>

标题和段落之间将显示一条水平线。此栏将具有颜色、大小、宽度、对齐的默认值。

自定义 HTML 中的水平线

可以根据所需的输出自定义属性（对齐、颜色、大小、宽度、阴影）。必须使用 CSS 修改文档中水平线的外观。

<hr> 的高度属性指定了条的粗细。可以使用不透明度属性设置栏的可见性。

例如，如果有人想要在文档中不太突出的栏，则不透明度值必须小于 1。

水平线的粗细

CSS 的 height 属性用于指定水平线的粗细。高度的最小值为 1px。

以下是 CSS 样式表的代码片段。

hr {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: green;
        margin-bottom: 30px;
        width: 30em;
    }

top 属性指定水平线和文档顶部之间的间隙。 CSS 中的背景是 HTML 颜色属性的替代品。

它指定条形的颜色。演示这些属性的完整代码如下：

<!DOCTYPE html>
<html>
<head>

    <title> Document </title>
    <style>

    hr.class1 {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: red;
        margin-bottom: 30px;
        width: 30em;
    }

    hr.class2{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        width: 30em;
    }

    </style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>

<hr class=class1>
<hr class=class2>

<p>Paragraph to split.</p>
</center>
</body>
</html>

水平线的不透明度

CSS 中的 opacity 属性指定水平线的透明度。不透明度值 1 表示不透明，而不透明度值 0 表示完全透明。

以下是不透明度属性的语法。

hr
{
    background-color: gray;
    opacity: 0.5;

}

示例:

<!DOCTYPE html>
<html>
<head>

    <title> Document </title>
    <style>

    hr.class1 {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: red;
        margin-bottom: 30px;
        width: 30em;
    }

    hr.class2{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        margin-bottom: 30px;
        width: 30em;
    }
    hr.class3{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        width: 30em;
        opacity: .25;
    }

    </style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>

<hr class=class1>
<hr class=class2>
<hr class=class3>

<p>Paragraph to split.</p>
</center>
</body>
</html>