css横线制作教程

使用border属性制作横线

通过设置元素的border属性可以快速创建横线。例如，创建一个1像素高的灰色横线：

.hr-border {
  border: none;
  border-top: 1px solid #ccc;
  margin: 10px 0;
}

使用hr标签默认样式

HTML原生<hr>标签自带横线效果，可通过CSS增强样式：

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

渐变效果横线

使用linear-gradient创建渐变横线：

.hr-gradient {
  height: 3px;
  background: linear-gradient(to right, transparent, #ff3366, transparent);
  border: none;
}

虚线样式横线

通过border-style实现虚线效果：

.hr-dashed {
  border: 0;
  border-top: 2px dashed #999;
  background: none;
}

阴影效果横线

添加box-shadow创造立体感：

.hr-shadow {
  height: 4px;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

双线样式

使用伪元素创建双横线效果：

.hr-double::after {
  content: "";
  display: block;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  height: 4px;
}

自定义图案横线

通过background-image使用图片作为横线：

.hr-pattern {
  height: 10px;
  background: url('pattern.png') repeat-x;
  border: none;
}