css制作页脚竖线
使用边框属性创建竖线
通过为页脚元素添加左侧或右侧边框实现竖线效果。例如，设置 border-left 属性可以创建左侧竖线：
footer {
border-left: 2px solid #333;
padding-left: 15px;
}调整 border-left 的宽度、颜色和样式（如 dotted 或 dashed）可自定义竖线外观。
使用伪元素生成竖线
通过 ::before 或 ::after 伪元素生成更灵活的竖线，适合精确控制位置和尺寸：
footer::before {
content: "";
display: inline-block;
height: 50px;
width: 1px;
background-color: #999;
margin: 0 20px;
}伪元素可以独立于页脚内容定位，适合复杂布局。
利用 Flexbox 或 Grid 布局分隔线
在包含多个栏目的页脚中，使用 CSS Grid 或 Flexbox 的间隙或边框作为分隔竖线：
.footer-container {
display: flex;
gap: 20px;
}
.footer-column:not(:last-child) {
border-right: 1px solid #ccc;
padding-right: 20px;
}此方法无需额外元素，直接利用布局特性实现分隔效果。
使用线性渐变模拟竖线
通过 background-image 的线性渐变创建视觉上的竖线，适合需要渐变效果的场景：
footer {
background-image: linear-gradient(to right, transparent 95%, #555 5%);
background-size: 100% 30px;
}调整颜色和尺寸参数可控制竖线的位置和粗细。
注意事项
- 竖线高度通常需要与页脚内容高度匹配，可通过
height或min-height控制。 - 响应式设计中建议使用相对单位（如
rem）或媒体查询调整竖线尺寸。 - 避免过度使用装饰性线条，确保符合整体设计风格。
