css制作横线

使用 border 属性

通过设置元素的 border-bottom 或 border-top 属性可以快速生成横线。调整 width、border-width 和 color 可自定义样式。

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

使用 hr 标签

直接使用 HTML 的 <hr> 标签，并通过 CSS 修改其样式。默认情况下 <hr> 自带横线效果，但可通过 CSS 进一步优化。

hr {
  height: 1px;
  background-color: #000;
  border: none;
}

使用伪元素

通过 ::before 或 ::after 伪元素生成横线，适合需要更灵活控制的场景（如添加动画）。

.hr-pseudo::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #000;
  margin: 10px 0;
}

使用线性渐变

通过 linear-gradient 背景生成横线，适合需要复杂样式（如渐变色横线）。

.hr-gradient {
  height: 1px;
  background: linear-gradient(to right, #000, #fff);
}

使用 flexbox 或 grid

结合布局工具生成横线，适用于需要与其他元素对齐的场景。

.container {
  display: flex;
  align-items: center;
}
.hr-flex {
  flex-grow: 1;
  height: 1px;
  background-color: #000;
}

选择方法时需根据实际需求（如兼容性、灵活性或语义化）决定。