css制作竖线

使用边框（border-left/border-right）

通过为元素添加左侧或右侧边框实现竖线效果。调整边框宽度、颜色和样式即可自定义竖线外观。

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

使用伪元素（::before/::after）

通过伪元素创建独立竖线，灵活性更高，可脱离原始元素位置单独控制。

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

使用线性渐变（linear-gradient）

通过背景渐变创建视觉上的竖线，适合需要透明或渐变效果的场景。

.gradient-line {
  background: linear-gradient(to bottom, 
    transparent 0%, 
    #000 20%, 
    #000 80%, 
    transparent 100%);
  width: 1px;
  height: 200px;
}

使用绝对定位（absolute positioning）

通过绝对定位在容器任意位置放置竖线，需配合父元素的相对定位使用。

.container {
  position: relative;
}
.line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: red;
}

使用flexbox/grid布局

在flex或grid布局中创建1px宽度的列作为分隔线，适合在布局系统中直接集成竖线。

.flex-container {
  display: flex;
}
.divider {
  width: 1px;
  background: #ddd;
  margin: 0 20px;
}

每种方法适用于不同场景：边框适合简单分隔，伪元素适合精细控制，渐变适合特殊效果，绝对定位适合精确定位，flex/grid适合响应式布局。可根据实际需求选择最合适的实现方式。