<hr>-水平分隔线

<hr> 标签在 HTML 中用于创建一条水平分隔线，通常用于视觉上分隔内容区块。它的作用简单直接，但通过 CSS 可以扩展出丰富的样式效果。

<hr> 标签的基本用法

<hr> 是一个空标签，不需要闭合，直接在 HTML 中插入即可生成一条默认样式的水平线：

<p>这是第一段内容</p>
<hr>
<p>这是第二段内容</p>

浏览器默认渲染为一条灰色、带阴影的 1px 高度线条，宽度占满父容器。不同浏览器可能呈现细微差异。

属性与兼容性

虽然现代 HTML5 已弃用大部分传统属性，但了解它们有助于维护旧代码：

<!-- 传统属性示例 -->
<hr align="center" width="50%" size="3" color="red" noshade>

• align：控制水平对齐（left/center/right）
• width：设置宽度（像素或百分比）
• size：定义厚度（像素）
• color：指定颜色（名称或十六进制）
• noshade：移除阴影效果

现代开发中应使用 CSS 替代这些属性：

hr {
  width: 50%;
  height: 3px;
  background-color: red;
  margin: 20px auto;
  border: none;
}

CSS 样式进阶

通过 CSS 可以创造各种视觉效果：

渐变分隔线

hr.gradient {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);
}

虚线样式

hr.dashed {
  border-top: 2px dashed #ccc;
  background: transparent;
}

自定义图案

hr.pattern {
  height: 10px;
  border: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="2" fill="%23ff0000"/></svg>');
}

语义化与可访问性

虽然 <hr> 默认具有分割内容的语义，但可以通过 ARIA 增强：

<hr aria-label="内容分隔线" role="separator">

屏幕阅读器会将其识别为分隔符。在复杂布局中，可以考虑使用 div 替代并添加 role="separator"。

响应式设计技巧

结合媒体查询实现自适应效果：

hr.responsive {
  height: 1px;
}

@media (min-width: 768px) {
  hr.responsive {
    height: 2px;
  }
}

创意应用实例

章节装饰线

<div class="section-divider">
  <hr class="fancy-line">
  <span class="decorative-star">✻</span>
  <hr class="fancy-line">
</div>

.fancy-line {
  width: 40%;
  display: inline-block;
  vertical-align: middle;
}

.decorative-star {
  padding: 0 10px;
  color: #ff6b6b;
}

动画分隔线

hr.animated {
  height: 4px;
  background: linear-gradient(90deg, transparent, #ff6b6b, transparent);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

浏览器兼容性注意事项

• IE8 及以下版本对 CSS3 样式支持有限
• 移动端浏览器可能忽略某些阴影效果
• 使用 SVG 背景时需测试 Retina 屏幕显示

替代方案对比

在某些场景下，其他元素可能更合适：

<!-- 使用边框模拟 -->
<div class="border-divider"></div>

<!-- CSS 方案 -->
<style>
  .border-divider {
    border-top: 1px solid #ddd;
    margin: 20px 0;
  }
</style>

选择依据：

• 需要语义化时用 <hr>
• 需要复杂交互时用 <div>
• 需要内联分隔时用 border 属性

打印样式优化

确保分隔线在打印时保持可见：

@media print {
  hr {
    border-top: 1px solid #000;
    background: none;
  }
}

与 CSS 框架的配合

主流框架如 Bootstrap 对 <hr> 有预设样式：

<!-- Bootstrap 分隔线 -->
<hr class="my-4 bg-primary">

Tailwind CSS 的实用类方案：

<hr class="border-t-2 border-dashed border-indigo-500 my-8">