当前位置：首页 > CSS

css制作竖线

2026-02-27 10:10:13CSS

使用 border-left 或 border-right

通过设置元素的 border-left 或 border-right 属性可以快速创建竖线。调整边框的宽度、样式和颜色即可自定义竖线外观。

.vertical-line {
  border-left: 2px solid #000;
  height: 100px;
}

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

通过伪元素可以更灵活地控制竖线的位置和样式，适合需要精确控制竖线位置的场景。

.element::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 50px;
  background-color: #000;
  margin: 0 10px;
}

使用线性渐变 background

通过 linear-gradient 背景可以创建竖线，适合需要复杂背景或动态效果的情况。

.vertical-line {
  background: linear-gradient(to right, transparent 49%, #000 50%, transparent 51%);
  height: 100px;
}

使用绝对定位和 transform

对于需要垂直居中的竖线，可以使用绝对定位和 transform 属性实现精准控制。

.container {
  position: relative;
  height: 200px;
}
.vertical-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #000;
  transform: translateX(-50%);
}

使用 flexbox 或 grid 布局

在 flexbox 或 grid 布局中，可以通过调整子元素的样式创建竖线，适合在复杂布局中使用。

css制作竖线

.flex-container {
  display: flex;
  align-items: center;
}
.vertical-line {
  width: 1px;
  height: 100px;
  background-color: #000;
  margin: 0 20px;
}