当前位置：首页 > CSS

css横线制作

2026-02-27 04:44:45CSS

使用border属性制作横线

通过为元素添加border-top或border-bottom属性可以快速创建横线。例如：

.hr-border {
  border-top: 1px solid #000;
  border-bottom: none;
}

使用hr标签默认样式

HTML原生<hr>标签默认显示为横线，可通过CSS增强样式：

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

使用伪元素生成横线

通过::before或::after伪元素实现更灵活的横线：

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

使用flex布局制作分隔线

结合flex布局创建具有间距的横线效果：

.container {
  display: flex;
  align-items: center;
}
.container::before, .container::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ddd;
}

使用box-shadow创建特殊横线

通过阴影效果实现特殊风格的横线：

.hr-shadow {
  height: 10px;
  box-shadow: 0 5px 5px -5px #333 inset;
}

使用渐变背景制作横线

CSS线性渐变可实现渐变色彩的横线：

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

使用SVG创建矢量横线

通过内联SVG实现可缩放的矢量横线：

css横线制作

.hr-svg {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><line x1='0' y1='0' x2='100%' y2='0' stroke='black' stroke-width='1'/></svg>");
}