当前位置：首页 > CSS

css制作横线

2026-02-13 00:59:27CSS

使用 border 属性

通过为元素添加 border-bottom 属性可以快速创建横线。调整 border-width、border-style 和 border-color 控制线条样式。

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

使用 hr 标签

HTML 原生 <hr> 标签默认生成横线，通过 CSS 可自定义样式。

hr.custom {
  height: 2px;
  background-color: #ff0000;
  border: none;
}

使用伪元素

通过 ::before 或 ::after 伪元素生成横线，适合需要精确控制位置的场景。

.hr-pseudo::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, #333, transparent);
  margin: 10px 0;
}

使用背景渐变

利用 linear-gradient 背景创建具有渐变效果的横线。

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

使用 box-shadow

通过 box-shadow 属性生成横线，适合需要阴影效果的场景。

.hr-shadow {
  height: 1px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

使用 flex 布局

结合 flex 布局和伪元素创建居中横线，常用于标题分隔。

css制作横线

.hr-flex {
  display: flex;
  align-items: center;
}
.hr-flex::before, .hr-flex::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ccc;
}
.hr-flex::before {
  margin-right: 10px;
}
.hr-flex::after {
  margin-left: 10px;
}