css横线制作

使用border属性制作横线

通过设置元素的border-top或border-bottom属性可以快速生成横线。例如：

.hr-border {
  border-top: 1px solid #000; /* 上边框线 */
  margin: 10px 0; /* 调整间距 */
}

优点：简单灵活，可通过调整颜色、粗细和样式（如虚线）实现不同效果。

使用hr标签默认样式

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

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

适用场景：语义化标注内容分隔，兼容性良好。

使用伪元素生成横线

通过::before或::after伪元素创建横线，适合无额外DOM结构的需求：

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

特点：可结合渐变或复杂背景，实现创意分隔线效果。

使用flex或grid布局的间隔线

在Flex或Grid容器中，通过gap或border实现横线效果：

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

优势：布局与分隔线一体化，适合列表项间隔。

使用box-shadow模拟横线

通过box-shadow属性生成横线，适合需要阴影效果的场景：

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

适用场景：轻量级分隔线，避免占用布局空间。

注意事项

• 横线宽度控制：通过width或父容器限制宽度。
• 响应式设计：使用百分比或视窗单位（如vw）适应不同屏幕。
• 可访问性：若为装饰性横线，建议添加aria-hidden="true"。