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适合响应式布局。可根据实际需求选择最合适的实现方式。
