css制作竖线

使用 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;
  border-left: 1px solid #ccc;
  height: 50px;
  margin-right: 10px;
}

使用线性渐变 background

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

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

使用绝对定位和宽度

通过绝对定位和固定宽度生成竖线，适合需要精确控制位置的场景。

.vertical-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: #000;
}

使用 flex 布局和间隔元素

通过 flex 布局和间隔元素生成竖线，适合在布局中分隔内容。

.container {
  display: flex;
}

.divider {
  width: 1px;
  background: #000;
  margin: 0 10px;
}