css横线怎么制作

使用border属性制作横线

通过元素的border属性可以快速创建横线。例如，设置border-top或border-bottom为1像素实线：

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

调整width控制横线长度，修改color和border-style可改变颜色和样式（如虚线）。

使用hr标签的默认样式

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

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

通过height调整线条粗细，background-color设置颜色，border: none移除默认边框样式。

使用伪元素生成横线

通过::before或::after伪元素在指定位置插入横线：

.element::after {
  content: "";
  display: block;
  width: 50%;
  margin: 10px auto;
  border-bottom: 1px dashed #999;
}

content必须为空，display: block确保独占一行，margin控制位置。

使用线性渐变背景

通过linear-gradient创建复杂横线效果：

.gradient-line {
  height: 3px;
  background: linear-gradient(90deg, red, yellow, green);
}

调整height控制粗细，渐变角度和颜色可自定义。

使用box-shadow模拟横线

为元素添加box-shadow实现横线效果：

.shadow-line {
  box-shadow: 0 5px 0 0 rgba(0,0,0,0.2);
}

参数依次为：水平偏移（0）、垂直偏移（控制位置）、模糊半径（0为实线）、扩散半径、颜色。