css横线制作

使用 border 属性

通过为元素添加 border 属性可以快速创建横线。例如，设置一个 div 元素的底部边框为实线：

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

调整 width 控制横线长度，border-bottom 的样式和颜色可自定义。

使用 hr 标签

HTML 原生 <hr> 标签默认生成一条横线，通过 CSS 可以进一步美化：

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

修改 height 调整线条粗细，background-color 改变颜色。

使用伪元素 ::after 或 ::before

通过伪元素在指定元素前后插入横线：

.element::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #000;
  margin-top: 10px;
}

适用于需要与其他内容紧密关联的横线。

使用 linear-gradient 背景

通过 CSS 渐变生成横线，适合复杂背景下的分割需求：

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

调整渐变方向和颜色可创建不同效果。

使用 box-shadow

利用 box-shadow 为元素添加投影式横线：

.shadow-line {
  box-shadow: 0 1px 0 0 #000;
}

适合需要简洁无占位的横线效果。