HTML水平线 <hr>

jerkzhang

Apr 15, 2020

<hr>标签在HTML页面中会显示成一条分隔内容的水平线。

<h1>H1标题</h1>
<p>这是一个段落</p>
<hr>
<h2>H2标题</h2>
<p>这是另一个段落</p>
<hr>
<p>这是又一个段落</p>

点击这里在专否沙盒中体验一下使用<hr>标签来画水平分割线。

<hr>标签默认情况下的display属性是block，即<hr>元素的两边都不会有其他内容，独立成行，对于分割线的颜色、粗细、样式都可以根据对border属性进行修改。

<style>
hr {
    border-top: 1px solid red;
    border: 1px solid green;
    border-bottom: 1px solid blue;
}
</style>

<hr>

运行一下

通过上例可以看出border-top、border、border-bottom这三个属性都可以对<hr>标签的样式造成影响，所以比较合适的一种做法就是，把四边中的三边的设置成0粗度，仅显示其中一边。如下所示：

<style>
hr {
    border: 0px;
    border-top: 1px solid red;
}
</style>

<hr>

运行一下