当前位置：首页 > CSS

css制作竖线

2026-01-28 07:06:16CSS

使用 border-left 或 border-right 属性

通过为元素添加单侧边框（border-left或border-right）可以快速创建竖线。调整边框宽度、颜色和样式即可自定义竖线外观。

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

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

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

.element::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #ccc;
}

使用线性渐变 background-image

通过 CSS 线性渐变创建竖线，适合需要复杂背景或动态效果的情况。可以生成虚线或渐变颜色的竖线。

.vertical-line {
  background-image: linear-gradient(to bottom, #000 0%, #000 100%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: center;
}

使用 flexbox 或 grid 布局的空隙

在 flex 或 grid 布局中，通过 gap 或 column-gap 属性产生的间隙可以模拟竖线效果。适合在列表或网格布局中作为分隔线。

.container {
  display: flex;
  gap: 1px;
}
.container > * {
  background-color: #fff;
}
.container::after {
  content: "";
  width: 1px;
  background-color: #000;
}

使用 SVG 内联背景

通过 SVG 创建精确控制的竖线，适合需要特殊样式（如虚线、圆点线）的情况。可以缩放而不失真。

.vertical-line {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='100%'><line x1='0' y1='0' x2='0' y2='100%' stroke='black' stroke-width='1'/></svg>");
  background-repeat: no-repeat;
}

每种方法适用于不同场景：边框方式最简单，伪元素最灵活，渐变适合动态效果，布局间隙适合结构化设计，SVG 则提供矢量精度。根据实际需求选择最合适的实现方式。

css制作竖线