css制作横线

使用 border 属性

在元素底部添加边框是最常见的横线制作方法。通过设置 border-bottom 属性可以快速生成横线，支持自定义颜色、粗细和样式。

.horizontal-line {
  border-bottom: 1px solid #000;
  width: 100%;
}

使用 hr 标签

HTML 原生 <hr> 标签默认生成一条横线，可通过 CSS 进一步修饰。这种方法语义化较好，适合内容分隔场景。

hr {
  height: 2px;
  background-color: #ccc;
  border: none;
}

使用伪元素

通过 ::after 或 ::before 伪元素创建横线，适合需要精确控制位置的场景。这种方法不会影响原有 DOM 结构。

.element::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #333, transparent);
  margin-top: 10px;
}

使用 box-shadow

利用阴影属性生成横线，适合需要特殊效果（如虚线、渐变）的情况。这种方法可实现复杂视觉效果。

.shadow-line {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.1);
  height: 1px;
}

使用 flex 布局

在 flex 容器中插入空元素并设置样式，适合需要与 flex 项目对齐的横线。这种方法能保持布局的整体协调性。

.container {
  display: flex;
}
.line {
  flex-grow: 1;
  height: 1px;
  align-self: center;
  background: #ddd;
}

每种方法适用于不同场景：border 适合简单分隔，hr 具有语义价值，伪元素适合非侵入式设计，box-shadow 可实现特效，而 flex 方案则适合复杂布局中的横线需求。