HTML 水平线：hr 标签及其样式设置

如何添加水平线

在两块内容之间放一个 <hr>。它没有结束标签：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <p>The end of the first part of the story.</p>
  <hr>
  <p>Three weeks later, a new part begins.</p>
</body>
</html>

默认情况下，这条线横跨容器的全宽，上下各有一点外边距，并画成一条细细的灰色 inset 边框（一条浅色边和一条深色边）。

<hr> 是 horizontal rule（水平线）的缩写。在 HTML 中，它表示主题分隔：一个区块内话题或场景的转换。屏幕阅读器会把它朗读为分隔符。如果你只想要一条装饰线（标题下方、卡片周围），请改用 CSS 在那个元素上画边框。

用 CSS 设置 hr 的样式

默认外观来自边框，所以设置 <hr> 样式最可靠的方法是去掉这些边框，自己画一条：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    hr { margin: 20px 0; }
    .blue { border: none; border-top: 2px solid #2563eb; }
    .thick { border: none; border-top: 6px solid #111827; }
    .dashed { border: none; border-top: 2px dashed #f59e0b; }
    .dotted { border: none; border-top: 3px dotted #16a34a; }
    .short { border: none; border-top: 2px solid #9ca3af; width: 40%; margin-inline: auto; }
    .round { border: none; height: 6px; background: #2563eb; border-radius: 3px; }
  </style>
</head>
<body>
  <hr>
  <hr class="blue">
  <hr class="thick">
  <hr class="dashed">
  <hr class="dotted">
  <hr class="short">
  <hr class="round">
</body>
</html>

在现代浏览器中，只给 hr 设置 color: blue 确实会改变这条线，但默认的 inset 样式会给它加上阴影，高度也保持 2px。重置边框才能得到你想要的效果。

旧的 hr 属性

旧代码会直接在标签上使用属性：

<hr size="4" width="50%" color="red" noshade align="left">

size、width、color、noshade 和 align 都已过时。浏览器仍然会应用它们，好让旧页面显示正常，但它们是无效的 HTML，以后也更难修改。请换成上面的 CSS。

中间带文字的分隔线

两个登录按钮之间那条带 “or” 的线并不是 <hr>（hr 不能包含文字）。它是一个 flex 行，在文字两侧各画一条线：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divider with text</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 320px; }
    .divider { display: flex; align-items: center; gap: 12px; color: #6b7280; font-size: 14px; }
    .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid #d1d5db; }
    button { width: 100%; padding: 10px; }
  </style>
</head>
<body>
  <button type="button">Continue with email</button>
  <p class="divider">or</p>
  <button type="button">Continue with a passkey</button>
</body>
</html>

::before 和 ::after 两部分各用 flex: 1 占据一半的剩余空间，并画出上边框。把 or 换成更长的词，两侧的线会自动缩短。

竖线

<hr> 没有竖向版本。要画竖线，可以在元素的一侧加边框，或者在 flex 行中放一个细元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .quote { border-inline-start: 4px solid #2563eb; padding-inline-start: 12px; }
    .row { display: flex; align-items: center; gap: 16px; }
    .vr { width: 1px; align-self: stretch; background: #d1d5db; }
  </style>
</head>
<body>
  <p class="quote">A border on the start side makes a vertical line.</p>
  <div class="row">
    <span>Home</span>
    <span class="vr"></span>
    <span>Docs</span>
    <span class="vr"></span>
    <span>Blog</span>
  </div>
</body>
</html>

border-inline-start 把线放在文字的起始一侧，在英文中是左边，在阿拉伯语或希伯来语中是右边，所以这个布局在两种书写方向下都能正常工作。

常见错误

• 写 </hr>。 <hr> 是空元素。写 <hr> 或 <hr /> 就够了。
• 用 <hr> 做装饰。 屏幕阅读器会朗读每一个 hr。纯视觉的线应该交给 CSS。
• 只用 color 设置样式。 先用 border: none 重置边框，再设置 border-top。
• 用 <br> 或下划线画线。 请用 <hr> 或边框。<br> 的用途参见换行。
• 使用过时的属性。 把 size、width、color 和 noshade 改写成 CSS。