css横线制作

使用 border 属性制作横线

通过设置元素的 border 属性可以快速生成横线。例如，创建一个高度为 1px 的横线：

.hr-border {
  border: 0;
  border-top: 1px solid #000;
}

调整 border-top 的宽度和颜色可改变横线样式。

使用 hr 标签默认样式

HTML 原生 <hr> 标签默认生成横线，可通过 CSS 自定义：

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

此方法语义化较好，适合内容分隔场景。

使用伪元素生成横线

通过 ::before 或 ::after 伪元素创建横线，灵活性高：

.hr-pseudo::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, #333, transparent);
}

渐变背景可实现特殊视觉效果。

使用 box-shadow 投影模拟

利用 box-shadow 创建细横线：

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

适合需要微阴影效果的场景。

使用 flex/grid 布局空隙

在 Flex 或 Grid 容器中通过间隙生成横线：

.container {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.item {
  background-color: #eee;
}

相邻元素间的间隙会形成视觉横线。